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

【问题标题】：React and text inputs - use onBlur or onChange?反应和文本输入 - 使用 onBlur 或 onChange？
【发布时间】：2018-09-26 02:23:45
【问题描述】：

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

要将值保存到我的状态，是onBlur 还是onChange 更好？

以 onChange 为例，

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

每次按下一个键都会更新状态。当我使用反应工具“显示更新”时，我会看到大量更新，因为该字段更新了多少次。

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

谢谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

所以这取决于你想要的场景:)

OnBlur 只会在用户点击离开字段时触发，如果这对您来说不是正确的用户体验，我的建议是使用输入延迟（也称为去抖动）！很好地拨入后非常酷。

我不会直接给你代码，因为它是一个非常有用的工具，可以在未来正确理解，但请查看：

import {debounce} from 'throttle-debounce';

曾经有很多这样的包，但它所做的是在你的构造函数中设置一个函数的超时：

this._updateValues = debounce(500, this._updateValues);

每次调用这个函数都会等待 500 毫秒再运行，但是如果在这个时间范围内再次调用它，定时器将被重置 :)

【讨论】：

【解决方案2】：

onChange。我不会尝试过度优化您看到的重新渲染，除非它对最终用户来说实际上是明显的。除非您有更大的表格，否则通常不是问题。通常在 React 中使用表单时，您使用受控字段，其中 react 维护状态并将值向下传递回字段（请参阅https://reactjs.org/docs/forms.html#controlled-components），在这种情况下，只有使用 onChange 来维护状态值才有意义。

如果您最终需要进一步优化，您可以将表单的某些部分拆分为使用 PureComponent 或 shouldComponentUpdate 的单独组件，以防止表单的这些部分不必要地重新呈现。

【讨论】：

【解决方案3】：

对于许多输入字段，您很难自己处理表单状态，因此您可以使用 Redux Form 它自己处理状态。

查看此链接https://redux-form.com/7.4.2/examples/simple/

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

【讨论】：