TypeScript로 작성된 form 연습

sonnng·2023년 1월 3일
0

React

목록 보기
4/8
post-thumbnail

form에 input, 제출 button 기초 구성해보기

import React, { useState } from "react";

function App() {
  # state hook 작성 #
  const [value, setValue] = useState("");
  # event의 type 작성 #
  const onChangeEvent = (event: React.FormEvent<HTMLInputElement>) => {
    console.log(event.currentTarget.value);
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };
  # event의 type 작성 #
  const onSubmitEvent = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setValue("");
  };
  return (
    <div>
      <form 
      onSubmit={onSubmitEvent}
      >
        <input
          value={value}
          type="text"
          onChange={onChangeEvent}
          placeholder="please text here"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

0개의 댓글