在ReactJS功能组件中实现Lodash的去抖动

Question

我正在尝试使用 Lodash 的debounce功能来消除文本输入字段更改的抖动。

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  const onChange = debounce((e) => {
    const { value } = e.target;
    console.log('debounced value', value)
  }, 1000)

  return (

    <input type="text" onChange={ onChange } />

  )
};

上面的代码抛出以下错误：

警告：出于性能原因重用此合成事件。如果您看到此内容，则说明您正在访问已发布/无效的合成事件的属性目标。这被设置为空。如果必须保留原始合成事件，请使用 event.persist()。

未捕获的类型错误：无法读取 null 的属性“值”

什么是正确的实施？

Answer 1

何时使用引用 引用有一些很好的用例：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 与第三方 DOM 库集成。

避免对任何可以声明式完成的事情使用 refs。

Refs 和 DOM

您定义的方式Input，我假设它会在很多地方使用。所以，我会这样做：

import React from "react";
import debounce from 'lodash.debounce';

const Input = () => {

  // Debounced function
  // `printValue` only cares about last state of target.value
  const printValue = debounce(value => console.log(value), 1000);

  // Event listener called on every change
  const onChange = ({ target }) => printValue(target.value);

  return <input type="text" onChange={ onChange } />;    

};