Ant Design的TreeSelect支持多选和搜索功能，如果查询不到，则搜索框不能清楚的问题处理

树型选择控件多选支持搜索的时候，输入文字，匹配不到数据的时候，失去焦点或者提交表单的时候清空输入的查询文字.

问题如下截图：

想要的结果如下：

解决方案：

在AntD的Select中，当失去焦点切未查询到数据时，会自动清空搜索框的值。地址：Antd Select

在实现这个过程中，也踩了不少坑。仔细读过TreeSelect的API之后发现了一个属性，叫做searchValue。searchValue就是搜索框展示的值。再配合onSearch事件和onBlur事件。解决了这个问题。

具体思路：在搜索的时候触发onSearch事件，将搜索值赋给searchValue，更新state，当失去焦点时，将searchValue更新为‘’，更新state。

第一版代码如下：

class Manager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewSearchValue:''
    };
  }

 qureHandleSearch = (value) => {
    this.setState({
      viewSearchValue:value
    })
  }

clearSearchValue = () =>{
    this.setState({
      viewSearchValue:''
    })
 }
render() {
const { viewSearchValue } = this.state;
   return (
                   <TreeSelect
                    allowClear
                    multiple
                    style={{ width: "100%" }}
                    dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                    treeData={roleTree} //roleTree为树的数据，就不贴代码了
                    treeNodeFilterProp="title"
                    onSearch={this.qureHandleSearch}
                    searchValue={viewSearchValue}
                    onBlur={this.clearSearchValue}
                  />

  )
}

}

 大致一看没有问题，但是如果搜索框的值在这个树中存在，那么点击这个数据的时候，这条数据不会价值的TreeSelect上，就是不会选中，相当于重新刷新了一次页面。大家可以尝试看下。

对于这个问题，其实查了一下原因，是由于onBlur的问题，失去焦点这个函数它只作用在TreeSelect上，而不是在展示的数据和组件上面(个人理解)。用图来说明：

为了解决这个问题，只需要增加一个定时任务，延迟触发onBlur方法体就可以。完整代码如下：

class Manager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewSearchValue:''
    };
  }

 qureHandleSearch = (value) => {
    this.setState({
      viewSearchValue:value
    })
  }

clearSearchValue = () =>{
    setTimeout(() => {
      this.setState({
        viewSearchValue:''
      })
    }, 100);
 }
render() {
const { viewSearchValue } = this.state;
   return (
                   <TreeSelect
                    allowClear
                    multiple
                    style={{ width: "100%" }}
                    dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                    treeData={roleTree}//roleTree为树的数据，就不贴代码了
                    treeNodeFilterProp="title"
                    onSearch={this.qureHandleSearch}
                    searchValue={viewSearchValue}
                    onBlur={this.clearSearchValue}
                  />

  )
}

}

完美解决！有问题可以留言。

标签：value,Ant,state,viewSearchValue,Design,props,搜索,TreeSelect
来源： https://blog.csdn.net/qq_35639030/article/details/104676562