React元素處理事件和DOM元素處理事件很類(lèi)似。下面是一些語(yǔ)法的不同之處：

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

舉個(gè)例子，這是一段HTML：

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

而在React中略微有些不同：

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

另一個(gè)不同之處就是在React中你不能通過(guò)返回false來(lái)阻止事件默認(rèn)的行為。你必須調(diào)用preventDefault。舉個(gè)例子，一個(gè)簡(jiǎn)單的頁(yè)面，為了阻止默認(rèn)的鏈接行為打開(kāi)一個(gè)新頁(yè)面，你可以這樣寫(xiě)：

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

在React中就得這樣寫(xiě)：

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

在這里，e是一個(gè)綜合的事件。React通過(guò)W3C標(biāo)準(zhǔn)來(lái)定義這些綜合事件，所以你可以不用擔(dān)心跨瀏覽器兼容性問(wèn)題。看看SyntheticEvent手冊(cè)學(xué)習(xí)更多知識(shí)。

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

當(dāng)你使用ES6的類(lèi)定義了一個(gè)組件，一個(gè)相同的模式就是一個(gè)事件監(jiān)聽(tīng)器會(huì)是類(lèi)的一個(gè)方法。舉個(gè)例子，這個(gè)Toggle組件渲染了一個(gè)按鈕來(lái)讓用戶在打開(kāi)和關(guān)閉的狀態(tài)中來(lá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方法會(huì)將函數(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)慎對(duì)待 JSX 回調(diào)函數(shù)中的 this，類(lèi)的方法默認(rèn)是不會(huì)綁定 this 的。如果你忘記綁定 this.handleClick 并把它傳入 onClick, 當(dāng)你調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值會(huì)是 undefined。

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

如果調(diào)用bind使你厭煩，還有兩種方法可以避免使用bind。如果你使用實(shí)驗(yàn)性的屬性初始化語(yǔ)法，你可以使用屬性初始化來(lái)正確地綁定回調(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> );} }

這個(gè)語(yǔ)法在Create React App中默認(rèn)開(kāi)啟。

如果你不使用屬性初始化語(yǔ)法，你可以在回調(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> );} } 這個(gè)語(yǔ)法的問(wèn)題就是當(dāng)LoggingButton組件每一次渲染的時(shí)候一個(gè)不同的回調(diào)函數(shù)就會(huì)被創(chuàng)建。在大多數(shù)情況下，這沒(méi)有什么問(wèn)題。然而，如果這個(gè)回調(diào)函數(shù)被當(dāng)做一個(gè)props傳遞給子組件，那么那些子組件可能會(huì)做一次重新渲染。我們通常建議將方法在構(gòu)造函數(shù)里綁定一下this或者使用屬性初始化語(yǔ)法，這樣可以避免這一類(lèi)重復(fù)創(chuàng)建的問(wèn)題。 向事件處理程序傳遞參數(shù) 通常我們會(huì)為事件處理程序傳遞額外的參數(shù)。例如，若是 id 是你要?jiǎng)h除那一行的 id，以下兩種方式都可以向事件處理程序傳遞參數(shù)： <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

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

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

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

class Popper extends React.Component{constructor(){super();this.state = {name:'Hello world!'};}preventPop(name, e){ //事件對(duì)象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文档（七）处理事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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