通过去抖动反应 MUI 文本字段

Question

一直在使用React Material UI，并且想要使用

TextField

，它既是去抖（或节流）又是受控。
受控 - 持久性值保存在其他地方，并且组件接受

value

和

onChange

函数作为道具。
debounced - 仅当用户停止输入指定的毫秒数时才会调用

onChange

函数。当然，对于相干显示，组件可能会保持

innerValue

状态。
我希望用法是这样的，

TextField

的其他道具也转发到内部实现

<TextFieldDebounced value={value} onChange={v => setValue(v)} debounceMs={500} />

寻找这个已经有一段时间了，关于该主题的网页很少，但无法创建这样的组件。
非常感谢所有回答的人。

Answer 1

您可以通过将去抖函数附加到 useCallback 挂钩来实现此目的，以防止 React 更新去抖函数的引用。

type Props = {
  debounceMs?: number;
  onChange: (p: string) => void;
  value: string;
};

const TextFieldDebounced: React.FC<Props> = ({
  debounceMs = 300,
  onChange,
  value = '',
}) => {
  const debouncedChangeHandler = React.useCallback(
    debounce(onChange, debounceMs),
    []
  );

  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
    debouncedChangeHandler(target.value);
  };

  return <TextField value={value} onChange={handleChange} />;
};

这是我在多个代码库中使用的去抖函数

function debounce<T>(func: (...param: T[]) => void, timeout = 3000) {
  let timer: number;

  return (...args: T[]) => {
    window.clearTimeout(timer);
    timer = window.setTimeout(func, timeout, ...args);
  };
}

这是 stackblitz

上的完整工作示例