반응형
이러한 기본적인 코드가 있음.
const [age, setAge] = useState(0);
const [username, setUsername] = useState('');
const ageHandler = (event) => {
setAge(event.target.value);
};
const usernameHandler = (event) => {
setUsername(event.target.value);
};
// jsx
<input type="number" onChange={ageHandler} />
<input type="text" onChange={usernameHandler} />
<button type="submit" onClick={submitHandler}>click</button>
버튼 누르면 해당값 따로 저장해두고 다시 input 리셋하려고 함.
const submitHandler = (event) => {
event.preventDefault();
const data = {
age: age,
username: username
};
setAge(0);
setUsername('');
}
그래서 그런 함수를 만듬. 근데 안먹힘. input에 써놓은거 그대로임.
1. value 추가하기
<input type="number" value={age} onChange={ageHandler} />
어려울 것없이 그냥 value를 추가해주면 된다. 그러면 알아서 서로 바인딩되서 값을 아주 리셋해줌.
'react' 카테고리의 다른 글
[React][typescript] 모듈 또는 해당 형식 선언을 찾을 수 없습니다. (1) | 2023.12.19 |
---|---|
[React] jsx의 div 늪에서 빠져나오는 방법 (0) | 2023.12.18 |
[React] 함수에 파라미터 넘기는 법 (0) | 2023.12.14 |
[React] 컴포넌트끼리 데이터 넘기기 총정리 (0) | 2023.12.13 |
[React] useState로 여러 상태를 관리하는 법과 set함수에서 콜백함수 쓰는 이유 (0) | 2023.12.13 |