velopert
3. 타입스크립트로 리액트 상태 관리하기 · GitBook
항상 참고하면서 익히고 있습니다. 좋은 글 감사합니다. 😀 onChange에 마우스를 올려도 이벤트에 대한 타입이 표시되지 않습니다.
위 이미지 처럼 이벤트에 대한 타입이 없이 나타납니다. 어느부분을 봐야하는 걸까요...
혹시 강의 처럼 React.FormEvent<HTMLFormElement> 이런 타입이 아니라 React.FormEventHandler<HTMLFormElement> 타입으로 나온 경우
import React, { useState } from 'react';
type MyFormProps = { onSubmit: (form: { name: string; description: string }) => void; };
const MyForm: React.FC<MyFormProps> = ({ onSubmit }) => { const [form, setForm] = useState({ name: '', description: '', });
const { name, description } = form;
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const { name, value } = e.target; setForm({ ...form, [name]: value, }); }; const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); onSubmit(form); setForm({ name: '', description: '', }); };
return ( <form onSubmit={(e) => handleSubmit(e)}> <input name='name' value={name} onChange={onChange} /> <input name='description' value={description} onChange={onChange} /> ); };
export default MyForm;
