react中，input的onchange事件搜索功能的节流方法，很简单~（_.debounce）

react（typescript）中，input的onchange事件搜索功能的节流方法，很简单~

第一步 引入相关包：

import _ from "lodash";

第二步 定义相关方法：

mapDebounceHandler = _.debounce(this.searchFn, 500); //节流

//实际要执行的的搜索事件
    searchFn = () => {
       // console.log("搜索了");
       //相关代码
    };

第三步 在input的onChange事件中使用：

<Input
     value={this.state.mapValue}
     placeholder="搜索地址"
     onChange={(e: any) => {
         this.setState({ mapValue: e.target.value });
         this.mapDebounceHandler(e.target.value);
     }}
/>

到这里一个在input输入时请求搜索接口，但是每500ms才会执行一次请求的节流就做好了。

可以出门左转去写您的代码~✨🎈