让antd的Input更通用

让antd的Input更通用(防抖+特殊样式的处理)

前提：封装组件

• 封装一个组件前,先考虑如何去使用一个组件,调用的地方都需要传什么去使用它的功能
• 一个input一定需要往上层传的一个onChange的方法,把更改的值传出去,可能还有一个默认值defaultValue 修改样式：classes，placeholder,输入框内可能还需要一些icon图标 如下：

type Props = {
  defaultValue?: string; //默认值
  onChange: (val: string) => void; 
  classes?: Record<string, any>;//样式
  placeholder?: string;
  delay?: number;
  children?: React.ReactNode;
};

内部实现防抖和input的输入搜索功能

  const [searchValue, setSearchValue] = useState<string>('');
  const [inputValue, setInputValue] = useState<string>('');
  const [isInit, setIsInit] = useState<boolean>(true);

  useEffect(() => {
    setSearchValue(defaultValue || '');
  }, [defaultValue]);

  useEffect(() => {
    const handler = setTimeout(() => {
      setInputValue(searchValue);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [searchValue]);

  const onSearch = useCallback((event: any) => {
    setIsInit(false);
    setSearchValue(event.target.value);
  }, []);

  useEffect(() => {
    if (!isInit) {
      onChange(inputValue);
    }
  }, [inputValue]);

引入antd的input

     <Input
        className={clsx(lessStyles.searchinput, classesCustom.searchinput)}
        placeholder={placeholder}
        allowClear
        value={searchValue}
        prefix={<SearchOutlined style={{ color: '#ccc' }} />}
        suffix={children}
        onChange={onSearch}
        style={{ width: 200 }}
      />