지원되는 이벤트
SyntheticEvent – React (reactjs.org)
예시) 일정 추가하기
state = {
todoList: [],
current: ''
};
onKeyDown
- 엔터를 누르면 할일 목록에 일정을 추가하는 이벤트 핸들러
- 이때 todoList에 push하면 안 되고 아래와 같이 setState로 상태값을 변경해주어야 한다.
onKeyDown = (evt) => {
if ( evt.keyCode === 13 ) {
const { todoList, current } = this.state;
this.setState({
todoList: [...todoList, current],
current: ''
});
}
}
onChangeCurrent
- 입력값이 바뀌면 입력된 값으로 current를 바꿔주는 이벤트 핸들러
onChangeCurrent = (event) => {
const current = event.target.value;
this.setState({
current: current
});
}
함수 연결
render() {
const { todoList, current } = this.state;
return (
<div>
<ul>
{todoList.map((todo, idx) => <li key={idx}>{todo}</li>)}
</ul>
<input
type="text"
placeholder="할일을 입력해주세요."
value={current}
onChange={this.onChangeCurrent}
onKeyDown={this.onKeyDown} />
</div>
);
}
};
'Frontend' 카테고리의 다른 글
Promise와 async/await (0) | 2022.03.17 |
---|---|
ES6+ 문법 정리 (0) | 2022.03.17 |
react-router-dom과 로그인 인증 (0) | 2022.01.22 |
백엔드 통합과 CORS (0) | 2022.01.20 |
프론트엔드 기초 (0) | 2022.01.20 |