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

【问题标题】：onChange or onBlur to change the state in ReactJs?onChange 或 onBlur 来改变 ReactJs 中的状态？
【发布时间】：2018-09-28 10:21:08
【问题描述】：

//假设在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，为什么？

【问题讨论】：

没有阅读任何答案，我会说onChange。我沿着 onBlur 路线走下去，因为我将无效字段连接到启用/禁用按钮，所以用户在键入而不是离开字段时看到启用的按钮更有意义。

【解决方案1】：

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

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

对 setState 的调用是异步的。它创建了一个“挂起的状态转换”。（有关详细信息，请参阅here）。它非常快，并且有一个减速器来仅更新更改的节点。所以你真的不需要考虑性能。

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

每次更改后验证输入

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

也想一下这个场景：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

onBlur 只会在您关注输入时调用 setState。

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

【讨论】：