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的问题，antd的onBlur事件触发的频率还是太高了。点击搜索框都会触发blur。所以继续优化代码。

利用onChange，FormItem，onSearch和onBlur来完成。

完整代码如下：

 

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

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

clearSearchValue = () =>{
    setTimeout(() => {
      this.setState({
        viewSearchValue:''
      })
    }, 100);
 }
selectChange = (value ) =>{
    const {form :{setFieldsValue} } = this.props;
    setFieldsValue({
      selectId:value
    })
  }
render() {
const { viewSearchValue } = this.state;
   return (
                <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 20 }} label=                        
                  {formatMessage({ id: "doc.directory.edit.role" })}>
                {getFieldDecorator("selectId", {
                  initialValue: [],
                })(
                   <TreeSelect
                    allowClear
                    multiple
                    style={{ width: "100%" }}
                    dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
                    treeData={roleTree}//roleTree为树的数据，就不贴代码了
                    treeNodeFilterProp="title"
                    onSearch={this.qureHandleSearch}
                    searchValue={viewSearchValue}
                    onBlur={this.clearSearchValue}
                    onChange={this.selectChange}
                  />
                )}
                </FormItem>

  )
}

}

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