一个 简单的防抖输入 input组件

图例

props

• delay
  • 延迟 onChange 的时间，默认 300 ms
• value
• onChange
• ...rest
  • 其他 antd-input 的入参

组件功能

防抖输入：用户在输入时，DebounceInput 组件不会立即调用 onChange 回调，而是会在用户停止输入后等待一段时间才触发回调。

状态管理：通过 useState 设置 text，在用户输入时更新 text，从而实现实时显示用户的输入，但是 onChange 确会由于防抖机制延迟调用

状态同步：组件内部管理输入状态，并且会根据外部传入的 value 更新内部状态，确保输入框内容始终与外部状态保持同步。

实现代码

点击 展开/收起 jsx 代码

/**
 * @des  防抖输入
 */
import React, { useCallback, useState, useEffect } from 'react';
import { Input } from 'antd';
import _ from 'lodash';

const DebounceInput = ({
  value,
  onChange,
  placeholder,
  delay = 300,
  disabled,
  className,
}) => {
  const [text, setText] = useState(value);

  useEffect(() => {
    setText(value);
  }, [value]);

  const debounceSearch = useCallback(
    _.debounce((val) => {
      onChange(val);
    }, delay),
    [delay, onChange],
  );

  const handleOnChange = (e) => {
    const val = e.target.value;
    setText(val);
    debounceSearch(val);
  };

  return (
    <Input
      className={className}
      value={text}
      onChange={handleOnChange}
      placeholder={placeholder}
      disabled={disabled}
    />
  );
};

export default DebounceInput;