javascript - react native : Using lodash debounce

我在玩React Native和lodash的反跳。

使用以下代码只会使其工作像延迟，而不会产生反跳。

<Input
 onChangeText={(text) => {
  _.debounce(()=> console.log("debouncing"), 2000)()
 }
/>

如果我输入“foo”之类的信息，我希望控制台仅记录一次去抖操作。现在，它记录了3次“反跳”。

最佳答案

去抖动函数应该在render方法之外的某个地方定义，因为每次调用它都必须引用该函数的同一实例，以反对创建一个新实例，就像现在将其放入onChangeText处理函数时一样。

定义反跳功能的最常见位置就是组件对象上。这是一个例子:

class MyComponent extends React.Component {
  constructor() {
    this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
  }

  onChangeText(text) {
    console.log("debouncing");
  }

  render() {
    return <Input onChangeText={this.onChangeTextDelayed} />
  }
}