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

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

作者: 无名程序猿 | 来源:发表于2019-07-26 19:05 被阅读0次
    • 思路
      第一步:给失焦事件添加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自定义下拉选择组件 失焦查询和单选事件冲突解决

          本文链接:https://www.haomeiwen.com/subject/vezdrctx.html