React事件處理的示例分析

小編給大家分享一下React事件處理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

React的事件處理和DOM的事件處理是很相似的，只是有一些語法上的區(qū)別：

• React的事件名是駝峰的，不是小寫的

• 在JSX語法中，你傳遞一個(gè)fucntion作為時(shí)間處理器，而不是一個(gè)string
  

舉個(gè)例子：

<button onClick={activateLasers}> 
 Activate Lasers
</button>

而且如果你想拿到事件對象event，這個(gè)對象是React按照w3c標(biāo)準(zhǔn)完成的，所以不用擔(dān)心瀏覽器的兼容性，可以像如下這樣：

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};

 // 這個(gè)`this`綁定是有必要的，用來讓this可以在回調(diào)中被正確指向React組件的實(shí)例對象
 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) ，但是都不推薦這么用啊~

以上是“React事件處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！