时间戳

首页 > 解决方案 > 在这个 React 应用程序示例中，bind(this) 到底在做什么？

javascript - 在这个 React 应用程序示例中，bind(this) 到底在做什么？

问题描述

我不太确定.bind(this)在这个例子中究竟在做什么？它是否只是将指定的函数连接到代码的其他组件，例如this.state？

constructor(props) {
   super(props);
   this.state = {
      input: '',
      messages: []
   }
   this.handleChange = this.handleChange.bind(this);
   this.submitMessage = this.submitMessage.bind(this);
}

标签： javascriptreactjsbind

解决方案

“bind”方法用于在触发时将上下文（例如“this”）传递给javascript函数。

在这种情况下，react组件的“this”传递给构造函数中的“handleChange”方法，
所以当“handleChange”将被调用时，如果在其代码中使用“this”，“this”将获取父组件的值。

handleCahnge() {
  this.sendSomethingToServer(); // this is react component
}

否则，（不使用“绑定”）如果某个事件触发了函数，则上下文将是事件的上下文（这将是事件目标元素而不是组件）

如果您使用箭头函数语法，则可以避免使用“绑定”语法：

handleCange = () => { this.sendSomethingToServer() };

推荐阅读