Antd Select 组件设定初始值 Option 选项匹配问题

一、问题描述

最近在实现编辑表单的功能时,其中有一个下拉选择框,需要设定初始值,数据源为对象数组,其中包含idname属性,将id设为Select.Optionkey,将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,也要设定valueid

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值