之前已經給大家介紹了React中的條件渲染（傳送門），本文將給大家關于React中事件處理的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：
React的事件處理和DOM的事件處理是很相似的，只是有一些語法上的區別：
舉個例子：
<button onClick={activateLasers}> Activate Lasers</button> 而且如果你想拿到事件對象event，這個對象是React按照w3c標準完成的，所以不用擔心瀏覽器的兼容性，可以像如下這樣：
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" rel="external nofollow" onClick={handleClick}> Click me </a> );}如果用ES6的class寫法可以像如下一樣：
class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 這個`this`綁定是有必要的，用來讓this可以在回調中被正確指向React組件的實例對象 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'));還有兩種方式可以避免寫顯式bind(this) ，但是都不推薦這么用啊~所以就不再贅述~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
