Question

我正在处理带有大约6个文本输入字段的表单。

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

例如onChange

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

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

我应该使用onBlur来避免这种情况吗？还是有一种方法可以“分批”状态更新？

谢谢

Answer 1

所以这取决于您想要的场景是什么：）

OnBlur仅在用户单击字段外时触发，如果那不是您的正确用户体验，我的建议是使用输入延迟（也称为反跳）！拨好电话后就非常酷。

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

import {debounce} from 'throttle-debounce';

曾经有很多这样的软件包，但是它的作用是在构造函数中的一个函数上设置了一个超时：

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

每次调用此函数都会在运行前等待500毫秒，但是如果在该时间段内再次调用该函数，则会重置计时器：）

Answer 2

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

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

Answer 3

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

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

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

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

3 个答案: