- 我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称);如果设置默认值initialValue是名称,那么下一步操作会出现报错
但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称
- 错误效果图:
- 期待正确效果图
-
解决方案:在默认值的后面加上一个空字符串进行转换;
<FormItem {...formItemLayout} label="活动红包">
{getFieldDecorator("redPacketId", {
rules: [{ required: true, message: "红包必填" }],
initialValue: redPacketId + ""
})(
<Select>
{redPackets.map(rp => (
<Option key={rp.redPacketCommonId}>{rp.packetName}</Option>
))}
</Select>
)}
</FormItem>
-
注意:initialValue设置的值本应该属于Select可供选的数据中某一个,select框显示的内容就是我们所希望的红包名称,提交form表单的时候,值就是Id;如果设置的值在Select可供选数据中找不到(例如:这里的select可供选数据是redPackets),那么显示的就是Id而不是名称。所以我们在设置initialValue的时候,应该填写的是下拉列表中包含option的value的值。