标签：value Ant state viewSearchValue Design props 搜索 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。