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

Question

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

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

例如onChange，

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

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

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

谢谢

Answer 1

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

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

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

从'throttle-debounce'导入{debounce}；

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

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

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