React元素處理事件和DOM元素處理事件很類似。下面是一些語法的不同之處：

• React事件的命名是用駝峰命名，而不是小寫字母。
• 利用JSX你傳遞一個函數(shù)作為事件處理器，而不是一個字符串。

舉個例子，這是一段HTML：

<button οnclick="activateLasers()">Activate Lasers </button>

而在React中略微有些不同：

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

另一個不同之處就是在React中你不能通過返回false來阻止事件默認的行為。你必須調(diào)用preventDefault。舉個例子，一個簡單的頁面，為了阻止默認的鏈接行為打開一個新頁面，你可以這樣寫：

<a href="#" οnclick="console.log('The link was clicked.'); return false">Click me </a>

在React中就得這樣寫：

function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked.');}return (<a href="#" onClick={handleClick}>Click me</a> ); }

在這里，e是一個綜合的事件。React通過W3C標(biāo)準(zhǔn)來定義這些綜合事件，所以你可以不用擔(dān)心跨瀏覽器兼容性問題?？纯?span style="color:#ff00ff;">SyntheticEvent手冊學(xué)習(xí)更多知識。

當(dāng)使用React你通常不需要調(diào)用addEventListener來向一個被創(chuàng)建的DOM元素添加事件監(jiān)聽器。只需要當(dāng)元素首次被渲染的時候提供一個監(jiān)聽器。

當(dāng)你使用ES6的類定義了一個組件，一個相同的模式就是一個事件監(jiān)聽器會是類的一個方法。舉個例子，這個Toggle組件渲染了一個按鈕來讓用戶在打開和關(guān)閉的狀態(tài)中來回變化：

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// This binding is necessary to make `this` work in the callbackthis.handleClick = this.handleClick.bind(this);
　　//bind方法會將函數(shù)handleClick的this設(shè)置為提供的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') );

在CodePen中試一試。

你必須謹(jǐn)慎對待 JSX 回調(diào)函數(shù)中的 this，類的方法默認是不會綁定 this 的。如果你忘記綁定 this.handleClick 并把它傳入 onClick, 當(dāng)你調(diào)用這個函數(shù)的時候 this 的值會是 undefined。

這并不是React的特殊行為；而是函數(shù)如何在js中工作的一部分。通常，如果你涉及到了一個后面沒有()的方法，就像onClick={this.handleClick}，你應(yīng)該為那個函數(shù)調(diào)用bind方法改變它的this。

如果調(diào)用bind使你厭煩，還有兩種方法可以避免使用bind。如果你使用實驗性的屬性初始化語法，你可以使用屬性初始化來正確地綁定回調(diào)：

class LoggingButton extends React.Component {// This syntax ensures `this` is bound within handleClick.// Warning: this is *experimental* syntax.handleClick = () => {console.log('this is:', this);}render() {return (<button onClick={this.handleClick}>Click me</button> );} }

這個語法在Create React App中默認開啟。

如果你不使用屬性初始化語法，你可以在回調(diào)里使用箭頭函數(shù)：

class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// This syntax ensures `this` is bound within handleClickreturn (<button onClick={(e) => this.handleClick(e)}>Click me</button> );} } 這個語法的問題就是當(dāng)LoggingButton組件每一次渲染的時候一個不同的回調(diào)函數(shù)就會被創(chuàng)建。在大多數(shù)情況下，這沒有什么問題。然而，如果這個回調(diào)函數(shù)被當(dāng)做一個props傳遞給子組件，那么那些子組件可能會做一次重新渲染。我們通常建議將方法在構(gòu)造函數(shù)里綁定一下this或者使用屬性初始化語法，這樣可以避免這一類重復(fù)創(chuàng)建的問題。 向事件處理程序傳遞參數(shù) 通常我們會為事件處理程序傳遞額外的參數(shù)。例如，若是 id 是你要刪除那一行的 id，以下兩種方式都可以向事件處理程序傳遞參數(shù)： <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述兩種方式是等價的，分別通過 arrow functions 和 Function.prototype.bind 來為事件處理函數(shù)傳遞參數(shù)。

上面兩個例子中，參數(shù) e 作為 React 事件對象將會被作為第二個參數(shù)進行傳遞。通過箭頭函數(shù)的方式，事件對象必須顯式的進行傳遞，但是通過 bind 的方式，事件對象以及更多的參數(shù)將會被隱式的進行傳遞。

值得注意的是，通過 bind 方式向監(jiān)聽函數(shù)傳參，在類組件中定義的監(jiān)聽函數(shù)，事件對象 e 要排在所傳遞參數(shù)的后面，例如:

class Popper extends React.Component{constructor(){super();this.state = {name:'Hello world!'};}preventPop(name, e){ //事件對象e要放在最后 e.preventDefault();alert(name);}render(){return (<div><p>hello</p>{/* Pass params via bind() method. */}<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a></div> );} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/hahazexia/p/6385750.html

總結(jié)

以上是生活随笔為你收集整理的React文档（七）处理事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。