一、问题描述
最近在实现编辑表单的功能时,其中有一个下拉选择框,需要设定初始值,数据源为对象数组,其中包含id
和name
属性,将id
设为Select.Option
的key
,将name
设为下拉选择器展示的内容,结果发现选项匹配出现问题,即选择框中展示了设定的初始值,展开下拉列表,却未勾选。
以下为关键部分源代码:
<Card title="前端展示">
<FormItem {...formItemLayout} label="前端展示:">
{getFieldDecorator('frontCategoryList', {
rules: [{
required: true, message: '必填'
}],
})(
<Select
mode="multiple"
allowClear
style={{ width: '70%' }}
placeholder="请选择类目"
showArrow={true}
>
{this.state.categoryList.map(item => <Select.Option key={item.id}>{item.name}</Select.Option>)}
</Select>
)}
<a
style={{ marginLeft: "15px" }}
href={`#/${menuPrefix}/item/frontCategory`}
>
前端类目管理
</a>
</FormItem>
</Card>
// 设定表单的初始值
this.setState(stateData, () => {
const setFieldsValue = this.props.form.setFieldsValue;
const setData = {}; // 存储表单初始值的对象
// 其他部分隐去,只说明frontCategoryList部分原来使用 name 来匹配
setData.frontCategoryList = ['机油', '轮胎'];
setFieldsValue(setData);
})
二、解决方案
设定初始值时设定的是字符串数组,实际上应该用id来匹配,并且Select.Option
组件应设定 value
属性为 id
的值
以下为实现的关键部分源代码:
<Card title="前端展示">
<FormItem {...formItemLayout} label="前端展示:">
{getFieldDecorator('frontCategoryList', {
rules: [{
required: true, message: '必填'
}],
})(
<Select
mode="multiple"
allowClear
style={{ width: '70%' }}
placeholder="请选择类目"
showArrow={true}
>
{this.state.categoryList.map(item => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
</Select>
)}
<a
style={{ marginLeft: "15px" }}
href={`#/${menuPrefix}/item/frontCategory`}
>
前端类目管理
</a>
</FormItem>
</Card>
// 设定表单的初始值
this.setState(stateData, () => {
const setFieldsValue = this.props.form.setFieldsValue;
const setData = {}; // 存储表单初始值的对象
// frontCategoryList部分应赋值为与原数据源匹配的 id 的集合
setData.frontCategoryList = [19701, 19702];
setFieldsValue(setData);
})
三、总结
对于数据源是字符串数组,直接使用字符串数组来匹配即可,antd
官网的例子即是这种情况Ant Design Select;对于数据源是对象数组,应该采用id
来匹配,而不是name
,并且Option
不应该只设定key
,也要设定value
为id
。