Question

发生点击事件时，事件信息在e中可用，对吗？我只是想尝试并了解两件事，对不起我的无知。

第一个是：“ id”实际上是什么？ React是通过onClick获得的特殊变量吗？如果是这样，为什么不是this.id？

而且，为什么要求this.deleteRow.bind(this, id)再次绑定“ this”？如果this.deleteRow有效，我没想到第二个'this'。那么，为什么它需要再次绑定“ this”呢？

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Answer 1

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

此版本的事件监听器清楚地表明，deleteRow方法（未显示其实现）带有两个参数。 id可能是应该删除的行的某些标识符，而e必须是实际的事件对象（因为这始终是浏览器提供给事件回调的参数）。

这是最明确的形式。但是请注意，如果由于某种原因您的代码在不支持箭头功能的环境中运行（并且您没有首先对其进行编译），那么显然这是行不通的。而且可能需要箭头功能，因为如果没有箭头功能，this方法内的deleteRow将不会像您期望的那样，特别是this.setState之类的东西将无法工作

除非，也就是说，您已采取其他步骤来确保this内的deleteRow是正确的，例如在第二个示例中：

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

函数对象的bind方法返回另一个相关的函数，并具有2个方便的属性。在上面的讨论中，第一个也是最相关的是函数内this引用将始终引用的对象。在任何情况下，您都将this引用“绑定”为您始终要说的内容。（好吧，除非您尝试使用new将绑定函数作为构造函数调用，否则我将认为这并不是您真正想要做的事情。）因此，这避免了“ this问题”可能不需要其他特定于ES6的功能就可以拥有（{{1}自ES5开始就存在）。

.bind的另一个有用功能与绑定bind的方式完全无关，它是将this的所有其他参数作为参数传递给函数，如果任何剩下的，它们都将作为新创建的“绑定函数”的参数。这称为“部分应用程序”-您通过向函数传递所需的一些参数来“部分应用”该函数，然后在调用新创建的函数时传递其他参数。

因此，在这种情况下，.bind的签名如下：

deleteRow

函数deleteRow(id, event) {...}以及将myThis.deleteRow.bind(myThis, myId)内this的所有出现deleteRow绑定到myThis的情况下，将创建一个新函数，该函数采用单个参数{{1 }}，并将其作为第二个参数提供给event，第一个固定为deleteRow。因此，当它被称为事件处理程序并传递了事件对象时，其行为与上述箭头函数版本完全相同-使用正确的myId，特定的this作为第一个参数，然后将事件作为第二个事件。

我认为毫无疑问，箭头函数版本应该是首选，更明确。即使您不能执行此操作，也可以通过以下方式避免部分应用程序：

将函数绑定到构造函数中：id和
然后使用“常规”匿名函数代替箭头函数：`onClick = {function（e）{this.deleteRow（id，e）;}}

Answer 2

该代码块似乎来自React文档中的Handling Events。您的第一个问题在此处的说明中得到了解决。 ID是特定于所提供示例的。

id是行ID

对于第二个问题，两行代码代表两个语法选择。

如果id是行ID，则以下任何一种方法都可以工作：

您可以选择在实现中使用哪个版本。

在React事件上寻找关于bind（this，id）的澄清

2 个答案: