删除项目

Question

当我删除所选项目时，我正在尝试保持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甚至不触发的原因的见解？

Answer 1

此组件支持手动控制其打开/关闭状态视图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}
            ...
            />;