Question

我正在使用React，我看到一个常见的做法是绑定构造函数中的函数，我也想使用它。虽然，我并没有完全了解绑定如何适用于带参数的函数。例如，我有这样的事情：

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不接受任何参数，这将有效。但是，在这种情况下，我不知道如何利用bind。有什么想法吗？

Answer 1

bind函数将上下文作为其第一个参数，并将原始函数参数作为this之后的下一组参数。返回的“绑定”（请原谅我可怕的语法！）函数具有相同的“绑定”参数，因此当您调用它时，它将使用与其绑定的相同参数集进行调用。

所以基本上<ListItem onClick={ () => this.onListClicked(myId) } />应该被<ListItem onClick={this.onListClicked.bind(this, myId)} />

取代但是，我没有看到你在构造函数中生成所需函数的方法，因为你不会在那里开始那些参数。您可以在构造函数本身中循环遍历数组并仅在那里创建那些“绑定”函数，但这只是浪费而且使用上述方法会有一个更优雅的解决方案。

从MDN了解bind的更多信息。

Answer 2

你的问题与绑定无关，而且实际上是关于React如何处理回调道具。

每个React事件监听器函数都会传递一个React的SyntheticEvent对象实例作为其第一个参数。

onClick={this.onListClicked}将调用onListClicked函数并向其传递一个参数：React提供的SyntheticEvent对象。

onClick={this.onListClicked.bind(this)}与上一个示例相同。 onListClicked.bind()返回onListClicked的包装版本，其context object设置为this（在您的情况下是您的React组件，因为这是this设置的时间你做绑定）。函数的这个包装版本仍然只接收一个参数：SyntheticEvent对象。

onClick={(e) => this.onListClicked(myId)}将调用匿名fat-arrow函数并向其传递一个参数：SyntheticEvent对象，因为匿名fat-arrow函数是回调函数，所有回调函数都获取该参数。此匿名胖箭头函数忽略其自己的参数，并使用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，因为它就在那里。

如何在React中使用bind？

2 个答案: