如何在React中使用bind？

我使用的反應，我看到了一個普遍的做法是綁定在構造函數的功能，這也是我想要使用。儘管如此，我並不完全明白綁定如何用於帶參數的函數。例如，我有這樣的事情：如何在React中使用bind？

class MyClass extends Component { 
    constructor(props) { 
     super(props); 

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

    onListClicked(id) { 
     // performs some action 
    } 

    render() { 
     return (
     // partially removed for brevity, value of myId comes from a loop 
     <ListItem onClick={() => this.onListClicked(myId) } /> 
    ); 
    } 
}

現在，這部作品在我的情況，但我不接受的bind優勢充分。如果我將ListItem更改爲<ListItem onClick={this.onListClicked} />，它不會按預期工作。如果onListClicked不接受任何參數，這將會起作用。但是，在這種情況下，我不知道如何利用綁定。有任何想法嗎？

來源

2017-09-17 typos

@ibrahimmahrir它沒有改變任何東西。我不認爲這個名字是這裏的問題。我需要以某種方式將參數傳遞給函數，在這種情況下是'myId'。 – typos

您需要將處理程序作爲prop傳遞給'ListItem'組件，然後從那裏您可以調用它。 –

並且'myId'從哪裏來？ –

你的問題與綁定無關，而且確實是關於React如何處理回調的道具。

每個陣營的事件監聽器函數傳遞陣營的SyntheticEvent對象的實例作爲其第一個參數。

onClick={this.onListClicked}將調用onListClicked函數並將其傳遞給一個參數：由React提供的SyntheticEvent對象。

onClick={this.onListClicked.bind(this)}是一樣的最後一個例子。 onListClicked.bind()其context object集中返回的onListClicked包裝版本，以this（在你的情況是你的陣營組成部分，因爲這是this設置，當你做的結合）。你的函數的這個包裝版本仍然只接收一個參數：一個SyntheticEvent對象。

onClick={(e) => this.onListClicked(myId)}將調用匿名胖箭頭函數並傳遞一個參數：SyntheticEvent對象，因爲匿名胖箭頭函數是回調函數，所有回調函數都獲取該參數。此匿名胖箭頭功能忽略其自己的參數，並呼叫this.onListClicked的值爲myId。

onClick={() => this.onListClicked(myId)}與最後一個例子相同，只是我們忽略SyntheticEvent因爲我們不關心它。

onClick={this.onListClicked.bind(this, myId)}，如在another answer建議，將包裝並調用onListClicked功能和傳遞兩個參數：第一個是myId（因爲bind被注入myId作爲參數以及上下文設置爲this），第二個是一個SyntheticEvent對象。

所以：根據你在onListClicked裏面做什麼，你可能需要也可能不需要將它綁定到你的React組件（或其他的上下文）。你真的需要在特定對象內定義的變量和函數嗎？然後將您的回調上下文綁定到該對象，並且只需要撥打this.foo或this.bar即可。但是如果你不需要訪問這些類型的東西，那麼就不需要使用bind，因爲它就在那裏。

來源

2017-09-17 17:40:21

謝謝你的澄清。 – typos

bind函數獲取上下文作爲第一個參數，並把你的原始功能參數作爲this後，下一組的參數。在「綁定」（請原諒我的語法可怕！）返回的函數具有相同的參數「綁定」來了，所以當你調用它，它會用相同的參數集，它正在與約束調用。

所以基本上一個<ListItem onClick={() => this.onListClicked(myId) } />應該由<ListItem onClick={this.onListClicked.bind(this, myId)} />

代替我，但沒有看到一個方法可以讓你產生你在構造函數本身所需要的功能，因爲你不會有這些參數在那裏從...開始。你可以在構造函數本身中遍歷數組並僅在那裏創建那些「綁定」函數，但這只是一種浪費，而一個非常優雅的解決方案就是使用上述方法。

閱讀從MDN更多關於bind。

來源

2017-09-17 16:50:32

如何在React中使用bind？

回答

相關問題