reactjs - 删除项目时保持语义 react 多选下拉列表打开

Question

当我删除选定的项目时，我试图让 Semanti-UI-React 的多选下拉菜单保持打开状态，但仍然在 Blur 上关闭它。我可以将 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 甚至不触发的见解？

Answer 1

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

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}
            ...
            />;