之前已經給大家介紹了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) ，但是都不推薦這么用啊~所以就不再贅述~

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。