antd select组件相关——多选下拉框的前后端传值问题

有下面一个select，模式是多选，要求给后端传所有选中项，格式为“1，2，，… ，n”

<Select
       mode="multiple"//多选
       value={this.state.category}
       showSearch={false}
       showArrow={true}
       defaultValue=""
       onChange={this.handleCategoryChange}>
        {this.categoryOptions.map((item: any) => {
                                return (
                                    <Select.Option value={item.name} key={item.category}>
                                        {item.name}
                                    </Select.Option>
                                );
                            })}
</Select>

handleCategoryChange = (name: any, category: any) => {
        this.setState({
            category: name,
            category_key: category.map((v: any) => v.key).join(",") || ""
        });
    };

要传给后端的是 this.state.category_key
后端要求的格式是“1，2，… ，n”
当选择一项或多项，触发onChange事件时，可以打印看到category的结构是：

因此只需要取每一项的key值，组成一个“key1，key2，… ，key3”的形式。

category.map((v: any) => v.key)//取每一项的key,结果：["key1","key2", ... ，"key3"]

Array.join(",") //将数组拆分为字符串 

以上，传值问题解决。有个待解决的小问题，多选模式下，antd的select 默认下拉箭头不显示。可以手动设置 showArrow={true} 即可显示。但每次点击展开下拉框，下拉箭头就变成搜索图标了。如有答案可以告诉我~🎈✨