reactjs - 如何消除最终形式的字段？

Question

这是一个非常常见的查询，但我对新的 final-form 库有点困惑。我曾经使用 redux-form 但这个新版本太不同了。

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

这是对 lib react-final-form-listeners 的第一次尝试，但是正如您将看到的，当您在文本字段中写入时，去抖不起作用:/

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

Answer 1

首先，我鼓励您在不使用模糊的包层的情况下完成所有这些操作。这将帮助您真正理解流程，但是，尽管如此，您还是可以在输入更改时调用函数:

• debounce(仅当用户停止输入 500 毫秒时执行一次)
• throttle(批量然后每 500 毫秒执行一次)
• 正常(在每次输入更新时执行)

在本例中，我只是在渲染方法之外创建了一个去抖函数。当使用类而不是钩子(Hook)时，情况会有所不同:

Hook :

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

类(或者您可以在构造函数中对类字段进行反跳，两者都可以):

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

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

工作示例(在codesandbox控制台打开时键入):

<小时/>

去抖动、 throttle 和正常执行之间的区别:

<小时/>

与上面相同，减去 react-final-form 和 react-final-form-listeners (项目中少了两个依赖项!):

工作示例(在codesandbox控制台打开时键入):

<小时/>