树型选择控件多选支持搜索的时候,输入文字,匹配不到数据的时候,失去焦点或者提交表单的时候清空输入的查询文字.
之前帖子方法有一点问题,就是在搜索树的时候,如果搜索到,在点击数据会存在数据有时候加载不进去的情况。修改原始代码。
问题如下截图:
想要的结果如下:
解决方案:
在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>
)
}
}
完美解决!有问题可以留言。