React 和文本输入 - 使用 onBlur 还是 onChange？

Question

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

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

以 onChange 为例，

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

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

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

谢谢

Answer 1

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

OnBlur 仅在用户单击该字段后才会触发，如果这对您来说不是正确的用户体验，我的建议是使用输入延迟（也称为去抖）！一旦你顺利拨通就非常酷了。

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

import {debounce} from 'throttle-debounce';

有很多像这样的包，但它的作用是在构造函数中的函数上设置超时：

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

每次调用此函数时，它将等待 500 毫秒然后运行，但如果在该时间范围内再次调用它，计时器将被重置:)