antd-select组件相关多选下拉框的前后端传值问题
目录
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} 即可显示。但每次点击展开下拉框，下拉箭头就变成搜索图标了。如有答案可以告诉我~🎈✨