antd select 加搜索框

3,234 阅读1分钟
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/…