onChange 或 onBlur 来改变 ReactJs 中的状态？

Question

//假设我改变state的handleChange功能。

在onChange事件状态的情况下将更新每个字符更改。

  <input
    type="text"
    name="name"
    onChange={this.handleChange}
    id="name"
  />

如果onBlur事件状态将在离开输入字段后单次更新。

 <input
   type="text"
   name="name"
   onBlur={this.handleChange}
   id="name"
 />

哪种方法最适合更新statein React，为什么？

Answer 1

这实际上是一个权衡决定。

我假设，在您的事件处理函数中，您正在调用React setState()以更新您的状态。

对 setState 的调用是异步的。它创建了一个“待定状态转换”。（有关更多详细信息，请参见此处）。它真的很快，并且有一个 reducer 来只更新更改的节点。所以你真的不需要考虑性能。

• 选择onChange()：如果您需要在输入更改后立即获得最新状态，例如：

每次输入后的搜索建议（如 Google 搜索框）

每次更改后验证输入

• 选择onBlur()：如果你只需要最后输入最后的最新状态，例如：

每次更改都会触发 fetch 事件，该事件检查输入的用户名或电子邮件是否存在

也想想这个场景：

最终用户填写了所有 3 个注册输入（姓名、密码和电子邮件），但在最后一次输入后，即电子邮件，他/她直接单击了发送按钮（这已在没有更新电子邮件值/状态的情况下触发了您的注册方法）。

由于setState是异步的并且尚未更新电子邮件状态，因此您可能会遇到有关空电子邮件输入的问题。

因此，我的非官方建议是尽可能使用，onChange并且onBlur仅在需要最终更改值时使用。

Answer 2

您可以根据您的要求选择其中一种方法。

例如，如果您需要在输入时对字段执行验证，则可以选择 onChange。

每次您在字段中输入内容时，都会调用 onChange 设置状态，这会导致再次重新渲染输入。

仅当您将输入焦点移开时，onBlur 才会调用 setState。

在我看来，onBlur 将是一个不错的选择，但这完全取决于我们的要求。