爲什麼這個回調函數不加bind（this）？

我知道，每次將自定義函數傳遞給像onChange或onSubmit這樣的事件處理函數時，我們都需要使用.bind。在以下示例中，我們傳遞一個事件處理函數（talk函數）作爲道具。當用戶點擊一個按鈕時，會調用通話功能。爲什麼這個回調函數不加bind（this）？

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Button = require('./Button'); 

var Talker = React.createClass({ 
    talk: function() { 
    for (var speech = '', i = 0; i < 10000; i++) { 
     speech += 'blah '; 
    } 
    alert(speech); 
    }, 

    render: function() { 
    return <Button talk={this.talk}/>; 
    } 
}); 

ReactDOM.render(
    <Talker />, 
    document.getElementById('app') 
);

Button.js

var React = require('react'); 

var Button = React.createClass({ 
    render: function() { 
    return (
     <button onClick={this.props.talk}> 
     Click me! 
     </button> 
    ); 
    } 
}); 

module.exports = Button;

此示例使用按鈕通話= {} this.talk代替按鈕{this.talk.bind。（這）}
，但是爲什麼呢？

來源

2017-06-05 Teris

你只需要'.bind'如果你需要'this'裏面的功能是指一個特定的值。由於'talk'不能訪問'this'，'.bind'不是必需的。還有一個事實是'React.createClass'自動綁定每個方法，但是這對你的例子沒有什麼影響。 –

.bind用於確保使用類的上下文而不是調用者的上下文來調用該函數。

當你訪問函數中的類屬性時，它是特別需要的。例如，如果您的speech變量是一個類變量而不是本地變量。

talk: function() { 
    for (this.speech = '', i = 0; i < 10000; i++) { 
     this.speech += 'blah '; 
    } 
    alert(this.speech); 
    },

在這種情況下，您需要bind。

你的talk函數沒有這樣做。它有自己的局部變量，因此可以使用任何this上下文來調用。

talk={this.talk}將在這裏工作。

此外，問題中綁定函數的語法不正確。它需要是this.talk.bind(this)而不是this.talk.bind.(this)

來源

2017-06-05 04:30:27

我認爲這裏所有的答案都是正確的，但這個解釋對於其他人來說更容易理解。 – Teris

因爲，基本上，.bind會將一個特定的對象「綁定」到「this」。但是由於這個函數並沒有使用「this」，所以如果你綁定它，這不是問題。

如果在函數中談話你有一個「談話者」類的實例的引用。那就是你將開始遇到一些問題的時刻。

來源

2017-06-05 04:29:54 digitake

在這種情況下，如果在另一個組件中使用了組件Talker，則需要使用bind。如果是這種情況，則Talker組件中的this將引用另一個組件。在你目前的情況下，它傳遞給按鈕。因此，需要使用bind以確保它是從Talker而不是Button組件調用。

來源

2017-06-05 04:31:19

當使用createClass時，會出現此行爲，其中React將每個方法（自定義和React組件API的方法）綁定到其組件，以使'this'可用。當使用ES6 .... extends React.Component時，同樣的情況也不能說，其中反應只會綁定'this'以對組件API方法作出反應。

而且，你不完全需要做this.talk.bind（本）每次都在您的渲染方法使用ES6，而不是

你可以

constructor() { 
    super() 
    this.talk = this.talk.bind(this) 
}

，並使用此.talk（）中的任何地方。

深入的解釋，https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/

來源

2017-06-05 04:36:22

有趣..雖然你有語法錯誤..它需要是'this.talk.bind（this）'。你在那裏增加了一個'.'。 –

爲什麼這個回調函數不加bind（this）？

回答

相關問題