handleChange = (value) => {
this.setState({
id: value,
isFocus: false
}, () => {
this.handleDropdownVisible(false)
})
}
handleNameChange = ({ target: { value } }) => {
this.setState({ name: value })
}
handleSearch = () => {
this.loadDatas()
}
handleSearchFocus = () => {
this.search.focus()
this.setState({ isFocus: true }, () => {
this.handleDropdownVisible(true)
})
}
handleSearchBlur = () => {
this.search.blur()
this.setState({ isFocus: false }, () => {
this.handleDropdownVisible(false,true)
})
}
handleDropdownVisible = (visible,isBlur) => {
const { name, isFocus } = this.state
if (isFocus) {
return
}
this.setState({
isOpen: visible,
name: visible ? name : null
}, () => {
if (!visible && isBlur) {
this.loadDatas()
}
})
}
<Select placeholder='请选择'
value={id}
open={isOpen}
onDropdownVisibleChange={this.handleDropdownVisible}
dropdownRender={menu => {
return (
<div>
<div onMouseDown={(e) => {
e.preventDefault()
return false
}}>
<Search ref={(ref) => this.search = ref}
enterButton
placeholder="请输入"
value={name}
onSearch={this.handleSearch}
onChange={this.handleNameChange}
onClick={this.handleSearchFocus}/>
</div>
<div onClick={this.handleSearchBlur}>
{menu}
</div>
</div>
)
}}
onChange={this.handleChange}>>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
</Select>
参考链接:ant.design/components/…