React中MultiSelect下拉框：黑名单特定项删除功能失效求助

你当前的getRenderItemFunc中调用的this.removeItem方法，应该只处理了白名单的状态更新（比如修改private_marketplace_groups），没有区分白名单和黑名单的不同状态逻辑。点击黑名单的删除图标时，实际还是在操作白名单的状态，因此黑名单的内容不会有变化。

下面提供两种可行的修改方式，核心是让删除逻辑能够区分当前操作的是白名单还是黑名单：

方案一：给渲染函数传入自定义删除回调 #

修改getRenderItemFunc，让它接收一个删除处理函数作为参数，这样两个下拉框可以各自传入对应的状态更新逻辑：

protected getRenderItemFunc = (onRemove: (item: OptionValue) => void) => {
    return (arg: OptionValue) => {
        const label = arg.label
        const removeItem = (e: any) => {
            e.stopPropagation();
            onRemove(arg);
        }
        return (
            <div className="simple-value">
                <span>{label}</span>
                <span
                    onClick={removeItem}
                    onMouseDown={(e) => e.stopPropagation()}
                    className="glyphicon glyphicon-remove"
                >
                    {' '}
                </span>
            </div>
        )
    }
}

然后在渲染两个MultiSelect时，分别传入对应列表的删除逻辑：

白名单部分 #

<MultiSelect
    placeholder="Select groups"
    values={this.state.private_marketplace_groups}
    options={this.state.private_marketplace_suggestions}
    onValuesChange={(values: any) => this.privateMarketplaceOnChange(values)}
    theme="bootstrap3"
    className="w-100p"
    renderValue={this.getRenderItemFunc((item) => {
        this.setState(prev => ({
            private_marketplace_groups: prev.private_marketplace_groups.filter(i => i.value !== item.value)
        }));
    })}
/>

黑名单部分 #

<MultiSelect
    placeholder="Select groups"
    values={this.state.blacklist_groups}
    options={this.state.private_marketplace_suggestions}
    onValuesChange={(values: any) => this.blackListOnChange(values)}
    theme="bootstrap3"
    className="w-100p"
    renderValue={this.getRenderItemFunc((item) => {
        this.setState(prev => ({
            blacklist_groups: prev.blacklist_groups.filter(i => i.value !== item.value)
        }));
    })}
/>

方案二：给删除方法增加列表类型标识 #

修改getRenderItemFunc，传入一个标识区分白名单/黑名单，再在removeItem方法里分支处理：

protected getRenderItemFunc = (listType: 'white' | 'black') => {
    return (arg: OptionValue) => {
        const label = arg.label
        const removeItem = (e: any) => {
            this.removeItem(e, arg, listType)
        }
        return (
            <div className="simple-value">
                <span>{label}</span>
                <span
                    onClick={removeItem}
                    onMouseDown={this.stopEventPropagation}
                    className="glyphicon glyphicon-remove"
                >
                    {' '}
                </span>
            </div>
        )
    }
}

// 修改removeItem方法，增加列表类型参数
private removeItem = (e: any, item: OptionValue, listType: 'white' | 'black') => {
    e.stopPropagation();
    this.setState(prev => {
        if (listType === 'white') {
            return {
                private_marketplace_groups: prev.private_marketplace_groups.filter(i => i.value !== item.value)
            }
        } else {
            return {
                blacklist_groups: prev.blacklist_groups.filter(i => i.value !== item.value)
            }
        }
    })
}

最后在渲染时传入对应类型：

• 白名单：renderValue={this.getRenderItemFunc('white')}
• 黑名单：renderValue={this.getRenderItemFunc('black')}

内容的提问来源于stack exchange，提问作者Mahmudul