何時將此關鍵字綁定到事件處理函數中？

Question

所以，假設我有一個名爲Search的類，它是一個帶有提交按鈕的簡單輸入字段。這是代碼。

class Search extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {term: ''}; 

     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     console.log(this); 
     console.log(e.target.value); 
     this.setState({term: e.target.value}); 
    } 

    render() { 
     return (
       <form className='input-group'> 
        <input className='form-control' 
        placeholder='City' 
        onChange={this.handleChange} 
        value={this.state.value}/> 
        <span className='input-group-btn'> 
         <button type='submit' className='btn btn-primary'>Submit</button> 
        </span> 
       </form> 
     ) 
    } 
} 

所以，我需要到this關鍵字綁定到事件處理程序，handleChange，在類的構造函數內部，使得它具有handleChange事件處理程序內的正確參考this。

但是，如果我的代碼更改爲以下

class Search extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {term: ''}; 

     //this.handleChange = this.handleChange.bind(this); 

行註釋以上

} 

    handleChange(e) { 
     console.log(this); 
     console.log(e.target.value); 
     this.setState({term: e.target.value}); 
    } 

    render() { 
     return (
       <form className='input-group'> 
        <input className='form-control' 
        placeholder='City' 
        onChange={(e) => this.handleChange(e)} 

線變化上面

    value={this.state.value}/> 
        <span className='input-group-btn'> 
         <button type='submit' className='btn btn-primary'>Submit</button> 
        </span> 
       </form> 
     ) 
    } 
} 

現在，如果我將代碼更改爲上述內容，則不再需要這樣做，因爲我正在從回調內調用this.handleChange。爲什麼會這樣？

Answer 1

原因是當您創建回調時使用arrow function。

您不需要將箭頭函數綁定到此，因爲箭頭函數「在詞彙上綁定了此值」。

如果需要，可以將事件處理函數更改爲箭頭函數，以便不需要綁定它們。您可能需要添加babel插件'transform-class-properties'以帶箭頭功能的transpile類。

如果你想改變handleChange成箭頭功能，只需更改

handleChange(e) { 
    ... 
} 

到

handleChange = (e) => { 
    ... 
} 

Answer 2

你要考慮的是什麼，你期待this將評估的方法內，這是不是只是侷限於回調。

在你handleChange方法的情況下，你指的是this.setState，你期待，當你創建React.Component擴展類this是定義它的包含類的主體。

當調用類似onClick的DOM on-event處理程序時，處理程序中的this關鍵字被設置爲從中調用它的DOM元素。參見：Event handlers和this on in-line handler。

正如您所能推斷的那樣，DOM元素上沒有setState方法，因此爲了達到所需的結果，需要將它綁定到正確的作用域/上下文。

這可以通過。綁定（）或=>（arrow function），後者沒有定義其自身的其自身的範圍/上下文，並使用範圍/上下文它封閉英寸

就像我先前所述的this的重新定義不僅僅是侷限於DOM事件回調。另一個例子是當您調用.map()方法時，您可以通過傳遞上下文值作爲第二個參數來定義this的上下文。