Event Handling in React
From Logic Wiki
Handling event
in the class
switchNameHandler = () => { console.log('clicked'); }
render(){ return ( <button onClick={this.switchNameHandler}>Switch Name</button>
bind
in order to use this
constructor() { super(); this.handleIncrement = this.handleIncrement.bind(this); } handleIncrement() { console.log("increment clicked", this); }
binding with arrow function
handleIncrement = () => { console.log("increment clicked", this); }
Passing event arguments
handleIncrement = product => { console.log(product); this.setState({ count: this.state.count + 1 }); }; <button onClick={ () => this.handleIncrement(product)}>Increment</button>
setState
switchNameHandler = () => { this.setState({person:{name:'aaa'}); }