타입스크립트 Forms

developer.do·2023년 2월 21일
0
post-thumbnail

타입스크립트 Forms

input과 form에 타입스크립트를 적용해보자

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => { // 여기서 event에 FormEvent - HTML InputElement를 사용한다고 정정을 해줬다.
    setValue(event.currentTarget.value); // 그렇게 되면 여기서 event. 오타가 발생을 해도 타입스크립트가 바로 잡아준다.
    console.log(event.currentTarget.value);
  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => { // 여기서는 event에 FormEvent -HTML Form Element를 사용한다고 명시를 해줬다.
    event.preventDefault(); // 그러기에 event. prrrreventDefault로 적게되면 바로 타입스크립트가 오률르 잡아준다.
    console.log("hello", value);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="username"
          value={value}
          onChange={onChange}
        />
        <button>추가</button>
      </form>
    </div>
  );
};

export default App;

0개의 댓글