首頁猿問為什么和何時我們需要綁定函數和事件...

為什么和何時我們需要綁定函數和事件處理程序的反應？

JavaScript React.JS

暮色呼如 2019-07-20 14:47:12

為什么和何時我們需要綁定函數和事件處理程序的反應？class SomeClass extends Component{ someEventHandler(event){ } render(){ return <input onChange={------here------}> }}我看到不同版本的------here------部分。// 1return <input onChange={this.someEventHandler.bind(this)}>// 2return <input onChange={(event) => { this.someEventHandler(event) }>// 3return <input onChange={this.someEventHandler}>版本有什么不同？還是只是偏好的問題？謝謝大家的回答和評論。所有這些都是有幫助的，我強烈建議閱讀這個鏈接。第一如果你和我一樣對此感到困惑的話。http：/blog.andreurey.me/React-ES6-autobinding-andcreateclass/

查看完整描述

2 回答

墨色風雨

TA貢獻1853條經驗獲得超6個贊

綁定不是特定的反應，而是如何反應。this在Javascript工作。每個函數/塊都有它自己的上下文，對于函數來說，它更具體的是如何調用它。反應小組決定this不綁定類上的自定義方法(也不是類的內置方法，如componentDidMount)時，添加ES6支持(類語法)。

當您應該綁定上下文時，取決于函數的用途，如果您需要訪問類中的道具、狀態或其他成員，則需要綁定它。

對于您的示例，每一個都是不同的，這取決于您的組件是如何設置的。

第一. .bind(this)用于將此上下文綁定到組件函數。如果您不想綁定該函數的每次使用(如在單擊處理程序中)，則可以通過以下任一方法預綁定該函數。

在構造函數中做綁定。阿卡

class SomeClass extends Component{
    constructor(){
        super();
        this.someEventHandler = this.someEventHandler.bind(this);
    }
    someEventHandler(event){
    }
    ....}

或者B.使您的自定義函數在類FAT箭頭函數上。阿卡

class SomeClass extends Component{
    someEventHandler = (event) => {
    }
    ....}

所有這些都涉及到這個上下文綁定。

第二. onChange={(event) => { this.someEventHandler(event) }是用內聯lambda(FAT箭頭)函數包裝組件處理程序函數，該函數可以提供一些附加功能。假設您想要向您的函數發送額外的Param，這是實現該功能的一種方法。

<input onChange={(event) => { this.someEventHandler(event, 'username') }>

如果需要，這將是向處理程序函數傳遞附加參數的一種方法。

第三..您只是將函數作為回調函數傳遞，以便在發生單擊事件時觸發，而不需要附加參數。

總結一下。這三個示例都與將處理程序函數傳遞給單擊事件有關。然而，有不同的東西，你可以添加到這一點。第一個是關于你的this背景。第二個問題是如何將參數傳遞給處理程序函數。

反對回復 2019-07-20

2 回答
0 關注
788 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么和何時我們需要綁定函數和事件處理程序的反應？

為什么和何時我們需要綁定函數和事件處理程序的反應？

2 回答

添加回答

為什么和何時我們需要綁定函數和事件處理程序的反應？

為什么和何時我們需要綁定函數和事件處理程序的反應？