初識React-Handler Events

react Elements事件的處理和dom的有相似之處;
1.命名規(guī)則:駝峰命名
2.方法是通過jsx而不是字符串
eg:<button onClick={activateLasers}>按鈕</button>;
eg:

class Toggle extends React.Component {
        constructor(props){
            super(props);
            this.state = {isToggle : true};
            //需要改變this的指向,如果忘記的話,當(dāng)你觸發(fā)事件的時候,this是undefined,導(dǎo)致setState為null
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick (){
            this.setState(prevState => ({
                isToggle:!prevState.isToggle
            }))
        }

        render(){
            //如果引用的是一個沒有()的方法,那就需要bind這個方法
            return <button onClick={this.handleClick}>{this.state.isToggle ? 'ON' : 'OFF'}</button>
        }
    }

    ReactDOM.render(<Toggle/>,document.getElementById('clock'))

如果不喜歡用bind,那這里還有兩種方式你可以得到this。

class LoggerBtn extends React.Component {
        handleClick = () => {
            console.log('this is:', this);
        }//這個語法默認在Create React App(facebook的腳手架)可用的
        render = () => <button onClick={this.handleClick}>點我看控制臺</button>;
    }

    ReactDOM.render(<LoggerBtn/>,document.getElementById('logBtn'));
//不用上面的那個語法,可以用箭頭函數(shù)
class LoggerBtn extends React.Component {
       handleClick (e){
           e.preventDefault();
           console.log('this is:', this);
       }
    render() { return <button onClick={(e) => this.handleClick(e)}>點我看控制臺</button>};
   }
    ReactDOM.render(<LoggerBtn/>,document.getElementById('logBtn'));

//第二個方式

class LoggerBtn extends React.Component {
       handleClick (){
           console.log('this is:', this);
       }
       render() { return <button onClick={this.handleClick.bind(this)}>點我看控制臺</button>};
   }

對比三種方式:
bind()
Function.prototype.bind(thisArg [, arg1 [, arg2, …]]) 是ES5新增的函數(shù)擴展方法,bind()返回一個新的函數(shù)對象,該函數(shù)的this被綁定到thisArg上,并向事件處理器中傳入?yún)?shù);
構(gòu)造函數(shù)內(nèi)綁定,只需綁定一次,避免每次渲染的時候重新綁定,函數(shù)在別處復(fù)用也無需綁定;
箭頭函數(shù)
會捕獲上下文this的值,但是箭頭函數(shù)是匿名的,如果涉及到移除監(jiān)聽事件,我們可以使用,吧箭頭函數(shù)賦值給一個變量

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. this之謎 在JavaScript中,this是當(dāng)前執(zhí)行函數(shù)的上下文。因為JavaScript有4種不同的...
    百里少龍閱讀 1,093評論 0 3
  • Javascript this 在JavaScript中, this 是當(dāng)前執(zhí)行函數(shù)的上下文。 JavaScri...
    Cause_XL閱讀 464評論 0 1
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,168評論 0 29
  • 1.函數(shù)調(diào)用棧和調(diào)用位置 在函數(shù)執(zhí)行的時候,會有一個活動記錄(也叫執(zhí)行上下文)來記錄函數(shù)的調(diào)用順序,這個就是函數(shù)調(diào)...
    lightNate閱讀 605評論 1 14
  • ES5中bind函數(shù)的特性: 權(quán)威參考MDN 語法:fun.bind(thisArg[,arg1[,arg2[,...
    gofanelena閱讀 2,036評論 0 3

友情鏈接更多精彩內(nèi)容