Question

为什么

<button onClick={() => this.handleClick(id)} />

相当于调用.bind：

<button onClick={this.handleClick.bind(this, id)} />

参考：https://reactjs.org/docs/faq-functions.html

箭头函数表达式的语法短于函数表达式并没有自己的this，arguments，super或者 new.target。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

如果箭头功能没有自己的功能，那么第一个handleClick（）与第二个相比会有不同的颜色，不是吗？

Answer 1

1. <button onClick={() => this.handleClick(id)} />

2. <button onClick={this.handleClick.bind(this, id)} />

是的，如果句柄点击没有预期任何id作为参数，则两者功能相同，那么你可以写成：

<button onClick={this.handleClick} />

在这种情况下，这将是其渲染的组件。要将参数传递给函数，您需要像这样编写onClick。首先，onClick需要一个函数作为值，而不是函数调用。所以将handleClick转换为绑定到正确上下文的函数（this：Component）。你需要使用bind来编写它。 bind返回一个上下文有界函数。对mdn的文档做出反应以获得更多理解。 bind mdn

Answer 2

1. <button onClick={() => this.handleClick(id)} />

此处this只是呈现它的组件范围。

因此，如果上面的按钮在组件A中呈现，那么这指向一个组件对象。

注意：此处this不是arrow function属性。它只是继承父作用域，除了按钮 - >渲染 - >组件A对象。

即。没有明确约束的词法范围。

2. <button onClick={this.handleClick.bind(this, id)} />

唯一的区别就是this与bind明确绑定，而import zipfile fantasy_zip = zipfile.ZipFile('E:\\Shared\\DOWNLOADED\\c.zip') fantasy_zip.extractall('E:\\Shared\\DOWNLOADED\\extract) fantasy_zip.close()又是组件A

将参数传递给React中的事件处理程序或回调

2 个答案: