删除项目时保持 Semantic-React 多选下拉菜单打开答案

【问题标题】：Keep Semantic-React multiple selection dropdown open when removing an item删除项目时保持 Semantic-React 多选下拉菜单打开
【发布时间】：2017-09-20 17:06:40
【问题描述】：

当我删除一个选定的项目时，我试图让 Semanti-UI-React 中的多选下拉菜单保持打开状态，但仍然让它在 onBlur 上关闭。我可以将 closeOnBlur 设置为 false 并获得删除所选项目所需的行为，但随后我必须单击下拉菜单上的箭头将其关闭。我尝试插入相关事件，看看是否有办法手动实现所需的行为，但奇怪的是，如果 closeOnBlur 设置为 false，我什至没有得到 onBlur 事件。

这是我的代码：

<Dropdown
    style={{whiteSpace: 'nowrap', zIndex: 9999}}
    upward={true}
    search={true}
    multiple={true}
    selection={true}
    loading={loading}
    options={options}
    value={this.props.selectedCodes || []}
    closeOnBlur={false}
    onBlur={() => console.log('onBlur')}
    onChange={ (e, d) => {
        console.log('onChange');
        const value = d.value as string[];
        const displayValues = value.map(code => {
            const lookupEntry = options.find(i => i.value === code);
            return lookupEntry ? lookupEntry.text : '';
        });
        const displayValue = displayValues.reduce(
            (result, text) => {
                return `${result}, ${text}`;
            }, ''\
        );
        this.props.onSelectionChange(value, displayValue);
    }}
    onClose={() => console.log('onClose')}
/>

关于如何实现我想要的行为的任何建议，或者关于如果将 closeOnBlur 设置为 false，为什么 onBlur 甚至不会触发的见解？

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

此组件支持手动控制其打开/关闭状态视图 open 属性。因此，只需通过自定义包含类的状态来管理该道具；

getInitialState() {
    return { open: false };
},

handleClose() {
    this.setState({open: false});
},

handleOpen() {
    this.setState({open: true});
}

render() {
    return <Dropdown
            open={this.state.open}
            onBlur={this.handleClose}
            onFocus={this.handleOpen}
            ...
            />;

【讨论】：