Question

我有一个父组件，该组件的状态保存数据，并且有一个处理程序，可以在输入元素发生任何更改时进行更新。

现在，我想提高性能，因为此处理程序正在执行大量验证，因此我想等到最后一次击键，然后再开始验证，但我仍然希望输入对用户键入做出反应。

问题是当我对处理程序进行反跳操作时，它可以工作，但是在反跳延迟时间内，如果我快速切换到另一个输入元素并开始键入，它将删除旧事件，因此我将结果停留在内部元素，但仅对第二个元素进行验证。

我试图创建一个新函数，该函数将调用该处理程序以使每个处理程序成为一个不同的实例，这样它们就不会彼此阻塞，但是没有用。

试图复制该功能，然后运行它，没有运气。

我也尝试过自己设置超时，这确实有效，但是后来我没有设法找到在新事件上停止超时的方法：（

我坚持在构造函数级别对处理程序进行反跳：

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

这正是我之前所描述的。

有两个处理程序，其中一个不会对输入类型产生反跳：

onSimpleChange({ target }) {
  const newData = ...; // Im copying target data to a new object here to pass instead.
  setState(..., () => this.onAdvancedChange({ target: newData }));
}

onAdvancedChange({ target }) {
  validate(target);  
  if needed -> setState(...);
}

它确实起作用，但是当我再次快速切换到另一个输入并在没有击打上一个防抖的情况下开始键入时，它根本不会命中，只有第二个可以验证。

如何使每个输入调用的高级处理程序私有，或者我尝试使用超时的其他选项，然后又如何针对每个输入单独在每个新事件中停止它？

提前谢谢您。

使一个处理程序对React中的所有输入元素进行反跳

0 个答案: