javascript - 寻找有关 React 事件上的 bind(this, id) 的说明

Question

当点击事件发生时，事件信息在e中可用，对吧？我只是想尝试理解两件事，抱歉我的无知。

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

还有，为什么需要 this.deleteRow.bind(this, id) 再次绑定(bind)“this”？如果 this.deleteRow 有效，我没想到会出现第二个“this”。那么为什么需要再次绑定(bind)'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 必须是实际的事件对象(因为这始终是浏览器向事件回调提供的参数) )。

所以这是最明确的形式。但请注意，如果由于某种原因您的代码在不支持箭头函数的环境中运行(并且您没有先转译它)，那么这显然是行不通的。并且可能需要箭头函数，因为如果没有它，deleteRow 方法中的 this 将不会是您期望的那样，特别是像 this.setState 不起作用。

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

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

bind函数对象的方法返回另一个相关的函数，并且有 2 个方便的属性。第一个，也是与上述讨论的上下文中最相关的，是函数内的 this 引用始终引用的对象。在任何情况下，您都将 this 引用“绑定(bind)”为始终如您所说。 (好吧，除非你尝试使用 new 来调用绑定(bind)函数作为构造函数，我认为这不是你真正想要做的事情。)所以这避免了“this 问题”，否则您可能会遇到这样的问题，而不需要任何特定于 ES6 的功能(.bind 自 ES5 以来就已存在)。

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

因此，在这种情况下，deleteRow 将具有如下签名:

deleteRow(id, event) {...}

函数 myThis.deleteRow.bind(myThis, myId) 会将 deleteRow 内出现的所有 this 绑定(bind)到 myThis 创建一个新函数，该函数采用单个参数 event，并将其作为第二个参数提供给 deleteRow，第一个参数固定为 我的ID。因此，当它作为事件处理程序调用并传递事件对象时，它的行为方式与上面的箭头函数版本完全相同 - 具有正确的 this、特定的 iddesired 作为第一个参数，event 作为第二个参数。

我认为毫无疑问箭头函数版本应该是首选，因为更加明确。即使您不能这样做，您仍然可以通过以下方式避免部分应用:

• 在构造函数中绑定(bind)函数:this.deleteRow = this.deleteRow.bind.this，以及
• 然后使用“普通”匿名函数代替箭头函数:`onClick={function(e) {this.deleteRow(id, e);}}