Question

据我所知，每次将自定义函数传递给onChange或onSubmit等事件处理程序时，我们都需要使用.bind

在下面的示例中，我们将事件处理程序（talk函数）作为prop传递。当用户单击按钮时，将调用通话功能。

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;

此示例使用Button talk = {this.talk}而不是Button {this.talk.bind。（this）}
，但为什么呢？

Answer 1

.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)

Answer 2

当使用createClass时，会出现此行为，其中React将每个方法（自定义和React组件API的方法）绑定到其组件，从而产生＆＃39; this＆＃39;可用。同样不能说当使用ES6 .... extends React.Component时，反应只能绑定＆＃39;这个＆＃39;反应组件API方法。

另外，你不需要这么做。每次你在渲染方法中使用ES6时，你都不会这样做。这个

你可以

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

并在其中的任何位置使用this.talk（）。

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

Answer 3

因为，基本上，.bind会＆＃34;绑定＆＃34;一个特定的对象＆＃34;这个＆＃34;。但由于该功能没有使用＆＃34;这个＆＃34;所以如果你绑定它就不会有问题。

如果在功能谈话中你提到了一个＆＃34; Talker＆＃34;班级的实例。那是你开始遇到一些问题的那一刻。

Answer 4

在这种情况下，如果在另一个组件中使用了组件bind，则需要使用Talker。如果是这种情况，this组件中的Talker将引用其他组件。在您当前的情况下，它会传递给按钮。因此，需要使用bind来确保从Talker而不是Button组件进行调用。

为什么这个回调函数不会添加bind。（this）？

4 个答案: