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

Question

//假设正在 handleChange 函数中更改 state。

如果onChange事件状态将更新每个字符更改。

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

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

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

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

Answer 1

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

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

对 setState 的调用是异步的。它创建了一个“待处理的状态转换”。 (有关更多详细信息，请参阅here)。它非常快，并且有一个 reducer 来仅更新更改的节点。所以你真的不需要考虑性能。

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

Search suggestion after each input (like Google search box)

Validating input after every change

• 选择onBlur():如果您只需要最终输入末尾的最新状态，例如:

Every change triggers a fetch event that checks if entered username or email exists

<小时/>

还想一下这个场景:

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

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

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