react自定义下拉选择组件 失焦查询和单选事件冲突解决

  • 思路
    第一步:给失焦事件添加timeou超时调用
    第二步:选择事件清除超时调用

废话少说,上代码:

 // 第一步
  SearchBlur = val => {
    // console.log(val);
    this.SearchBlurTimout = setTimeout(() => {
      this.state.params.key = val;
      this.state.params.pageNo = 1;
      this.reloadData(this.state.params);
    }, 300);
  };
// 组件卸载清除超时调用
 componentWillUnmount() {
    clearTimeout(this.SearchBlurTimout);
  }
第二步:
 // 列表项点击选择事件
  handleSelect = item => {
    this.SearchBlurTimout && clearTimeout(this.SearchBlurTimout);
    const { data, params } = this.state;
    if (!params.key) this.setState({ spinClass: null, showSearch: false });
    if (item.occupy && !item.select) {
      this.setState({ occDetails: true, occRoom: item });
    } else {
      this.setState({ occDetails: false, occRoom: null });
    }
    data.map(newItem => {
      if (newItem.id != item.id) {
        newItem.select = false;
      }
    });
    item.select = !item.select;
    this.setState({ data: data, selectValue: item.select ? item : null });
  };

你可能感兴趣的:(react自定义下拉选择组件 失焦查询和单选事件冲突解决)