ReactJS bind() 方法

当在ReactJS中使用函数作为事件处理程序时，需要使用bind()方法，将正确的作用域绑定到函数中。这样，函数中的“this”关键字将引用正确的对象。

语法

function.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg: 必需。新函数所绑定的“this”值。在React中通常是组件实例。如果该参数为null，则使用全局对象。
• arg1, arg2, ...: 可选。当绑定函数被调用时，这些参数将置于实参之前传递给被绑定函数。

示例

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

在上述示例中，constructor()方法中使用bind()方法将handleClick()方法绑定到组件实例中的正确作用域。这使得在handleClick()方法中使用this.setState()方法，始终将应用于组件实例的状态。在render()方法中，将handleClick()方法分配给元素的单击事件处理程序。

注意事项

• 在使用函数作为事件处理程序时，一定要在constructor()方法中使用bind()方法将该方法绑定到组件实例中的正确作用域
• 在组件实例上调用函数时，将始终使用绑定的作用域
• 在使用bind()方法时，可以将参数传递给该方法，这些参数将被传递给原始函数作为第一个实参