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"
 />

哪种方法最适合更新state中的React，为什么？

Answer 1

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

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

对setState的调用是异步的。它创建一个“待处理状态转换”。 （有关更多详细信息，请参见here）。它确实非常快，并且具有reducer仅更新已更改的节点。因此，您实际上不需要考虑性能。

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

  

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

     

每次更改后验证输入

• 选择onBlur()：如果仅在最终输入的末尾需要最新状态，例如：

  

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

---

也考虑这种情况：

您的用户填写了所有3个注册输入（名称，密码，电子邮件），但在上次输入电子邮件后，他/她直接单击了发送按钮（这将触发您的注册方法，而未更新电子邮件状态）。由于setState是异步的，并且尚未更新电子邮件状态，因此您可能会遇到有关空电子邮件输入的问题。

因此，我的非正式建议是，尽可能使用onChange，并在需要时使用onBlur。

Answer 2

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

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

每次您向字段输入内容时都会调用onChange设置状态，从而导致再次重新呈现输入。

onBlur仅在您对输入进行聚焦时才会调用setState。

我认为onBlur是不错的选择，但这完全取决于我们的要求。