react频繁使用的js(input防抖请求)

react频繁使用的js(input防抖请求)

input的防抖请求

import React, { useState, useEffect, useCallback } from "react";
import { Input } from "antd";
import SearchDeptID from "styled-components";
import { debounce } from "lodash";
export default function SearchDept(props) {
  const [keyword, setKeyword] = useState("");

  // input使用防抖
  const keywordDebounce = useCallback(debounce((val)=>{
    console.log('val',val);
  }, 300),[])
  const inputChange = (event) => {
    const value = event.target.value;
    setKeyword(value);
    keywordDebounce(value);
  }

  return (
    <SearchDeptWrap>
      <Input
        placeholder="请输入"
        className="ipt"
        value={keyword}
        onChange={inputChange}
      />
    </SearchDeptWrap>
  );
}
const SearchDeptWrap = SearchDeptID.div`
`;