如何对最终形式的字段反跳？

Question

这是一个非常常见的查询，但是我对新的final-form库感到有些困惑。我以前使用过redux-form，但是这个新版本太不同了。

我的需求很简单，我想在用户用某些文本书写时调度搜索，但是我想在字段中添加throttle。

这是lib react-final-form-listeners的首次尝试，但是如您所见，当您在文本字段中编写时，反跳不起作用：/

https://codesandbox.io/embed/react-final-form-simple-example-khkof

Answer 1

首先，我建议您在不使用模糊的包层的情况下完成所有这些操作。这将帮助您真正了解流程，但是，当输入更改时，可以通过以下方法调用函数：

• 去抖（仅在用户停止键入500ms时执行一次）
• 油门（然后每500ms分批执行一次）
• 正常（在每次输入更新时执行）

在这种情况下，我只是在render方法之外创建了一个防反跳函数。当使用类而不是钩子时，这会有所不同：

挂钩：

const handleSearch = debounce(searchText => { ... }, 500);

班级（或者您可以对constructor中的班级字段进行反跳工作）：

class Example extends Component {
  handleSearch = debounce(searchText => { ... }, 500)

  render = () => { ... }
}

工作示例（在打开代码和框控制台的情况下输入）：

---

去抖，限制和正常执行之间的区别：

---

与上述相同，减去react-final-form和react-final-form-listeners（项目中的依赖性减少了两个！）：

工作示例（在打开代码和框控制台的情况下输入）：

---

Answer 2

您的解决方案存在多个问题：

• 使用lodash debounce代替throttle。
• 在表单外部创建去抖动功能，以防止在每次重新呈现或更改时重新分配该功能
• 调用表单提交操作，而不是提交处理程序handleSubmit

修改并处理您的示例：