Javascript 如何在React中使用bind？

我正在使用React，我看到一种常见的做法是在构造函数中绑定函数，我也想使用它。尽管如此，我并没有确切地了解bind对于带参数的函数是如何工作的。例如，我有这样的东西：

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) } />
      );
    }
}

class MyClass扩展组件{
建造师（道具）{
超级（道具）；
this.onListClicked=this.onListClicked.bind（this）；
}
onListClicked（id）{
//执行一些操作
}
render（）{
返回(
//为了简洁起见，部分删除了myId，myId的值来自一个循环
this.onListClicked（myId）}/>
);
}
}

---

在我的情况下，这是可行的，但我没有充分利用

bind

。如果我将

列表项

更改为

，它将无法按预期工作。如果

onListClicked

不接受任何参数，则此操作会起作用。但是，在这种情况下，我不知道如何利用bind。有什么想法吗？

bind

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

因此本质上，

this.onListClicked（myId）}/>

应该被

一、 但是，您看不到在构造函数本身中生成所需函数的方法，因为这里没有这些参数。您可以在构造函数本身中循环数组并仅在那里创建那些“绑定”函数，但这只是一种浪费，使用上述方法将是一个非常优雅的解决方案

从中阅读有关绑定的更多信息

---

---

bind

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

因此本质上，

this.onListClicked（myId）}/>

应该被

一、 但是，您看不到在构造函数本身中生成所需函数的方法，因为这里没有这些参数。您可以在构造函数本身中循环数组并仅在那里创建那些“绑定”函数，但这只是一种浪费，使用上述方法将是一个非常优雅的解决方案

从中阅读有关绑定的更多信息

---

---

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

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

onClick={this.onListClicked}

将调用

onListClicked

函数并向其传递一个参数：React提供的

SyntheticEvent

对象

onClick={this.onListClicked.bind（this）}

与上一个示例相同

onListClicked.bind（）

返回

onListClicked

的包装版本，并将其设置为

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）}

将按照中的建议包装并调用

onListClicked

函数，并向其传递两个参数：第一个参数是

myId

（因为

bind

将

myId

作为参数注入，并将上下文设置为

this

）第二个是

SyntheticEvent

对象

---

因此：根据您在

onListClicked

中的具体操作，您可能需要也可能不需要将其绑定到您的React组件（或其他上下文）。您确实需要在特定对象中定义变量和函数吗？然后将回调上下文绑定到该对象，并调用

this.foo

或

this.bar

所需的全部内容。但是，如果您不需要访问这些类型的东西，那么就没有必要仅仅因为它在那里就使用

bind

。

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

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

onClick={this.onListClicked}

将调用

onListClicked

函数并向其传递一个参数：React提供的

SyntheticEvent

对象

onClick={this.onListClicked.bind（this）}

与上一个示例相同

onListClicked.bind（）

返回

onListClicked

的包装版本，并将其设置为

this

（在您的情况下，这是您的React组件，因为当您进行绑定时，

this

设置为该组件）。此包装版本的函数仍然只接收一个参数：一个

SyntheticEvent

对象

onClick={（e）=>this.onListClicked