Javascript 反应和文本输入-使用onBlur或onChange？

我正在处理一个包含6个文本输入字段的表单

要将值保存到我的状态，最好是

onBlur

还是

onChange

例如onChange

onChangeTextInput = ({ name, value }) => {
    this.setState(state => ({
      ...state,
      form: {
        ...state.form,
        [name]: value
      }
    }));
  };

每次按下一个键，它都会更新状态。当我使用react工具“show update”时，我会看到大量的更新，因为字段被更新了多少次

我应该使用onBlur来避免这种情况吗？还是有办法“批量”状态更新

---

谢谢

所以这取决于您希望场景是什么：）

OnBlur只会在用户点击字段外时触发，如果这不是正确的用户体验，我的建议是使用输入延迟（也称为去抖动）！很酷，一旦你把它拨好了

我不会直接向您提供代码，因为这是一个非常有用的工具，可以在将来正确理解，但请查看：

import{debounce}来自“油门去盎司”

曾经有很多类似的包，但它所做的是在构造函数中设置函数的超时：

this.\u updateValues=debounce（500，this.\u updateValues）

每次调用此函数时，它将等待500毫秒才能运行，但如果在此时间范围内再次调用，则计时器将重置：）
onChange。我不会试图过度优化您看到的重新渲染，除非最终用户确实注意到它。通常这不是问题，除非你有更大的表格。通常，在React中使用表单时，使用控制字段，React在其中维护状态并将值向下传递到字段（请参见），在这种情况下，使用onChange来维护状态值才有意义

如果最终需要进一步优化，您可以将表单的各个部分拆分为单独的组件，这些组件使用PureComponent或shouldComponentUpdate来防止表单的这些部分不必要地重新呈现。
对于许多输入字段，很难单独处理表单状态，因此您可以使用Redux表单，它自己处理状态

请参阅此链接

无论如何，onBlur将是处理表单输入状态的最佳实践，因为onChange可能会在输入字段中进行更改时设置状态。例如，如果在输入字段中键入“name”，它会设置状态4次，因此页面可能会重新渲染4次，但在焦点离开输入字段后，onBlur会设置状态