<button onClick={activateLasers}>
Activate Lasers
</button>
바른 사용법 onClick={activateLasers} 입니다.
onClick="activateLasers" 아닙니다.
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
반드시 preventDefault를 호출해야 합니다. flase를 반환해도 기본 동작을 방지할 수 없습니다. 따라서 기본 동작을 방지하기 위해 preventDefault를 명시해줍니다.
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
// 콜백에서 this가 작동하려면 아래와 같이 바인딩 되어야 합니다.
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
루프 내부에서 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동합니다.
아래에서 id 어디나왔냐고 찾지 말자.. 예를 들어놨을 뿐이니까..
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
결과는 같으며, 화살표 함수와 Function.prototype.bind 를 사용한 차이일 뿐입니다.
두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달됩니다.