antd form表单select设置初始值怎样做？-群英

上一篇：vue项目iview树形控件怎么样使用？下一篇：vue怎样做多层循环表单验证？

antd form表单select设置初始值怎样操作？select设置初始值的操作还是比较简单的，大家直接看代码吧。另外，本文给还给大家分享了解决antd 表单获取不到默认值的问题，感兴趣的朋友就继续往下看吧。

<Form.Item label="作用对象">
      {getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
       rules: [{
        required: false,
        message: '作用对象'
       }]
      })(
       <Select placeholder="请选择作用对象">
        {targetList.map(entity => <Option key={entity.id} value={entity.id}>{entity.name}</Option>)}
       </Select>
      )}
     </Form.Item>

在getFieldDecorator('targetId',时添加初始值而不是在select标签中添加初始值

补充知识：解决antd 表单获取不到默认值的问题

使用 antd 的 4.x 版本，给表单设置初始值，但是获取不到值

如果需要设置默认值并展示到页面上，需要设置两个地方：

设置 defaultValue，这个是用来展示在页面上的，例如：

<Form.Item label="Sex" name="sex" valuePropName="checked">
 //这里的defaultValue
 <Radio.Group defaultValue={1}>
 <Radio value={1}>男</Radio>
 <Radio value={0}>女</Radio>
 </Radio.Group>
</Form.Item>

设置 initialValues，这个是用来获取表单值的，例如：

<Form
 name="basic"
 onFinish={this.onFinish}
 onFinishFailed={this.onFinishFailed}
 initialValues={{
  sex: 1
 }}
 >
 <Form.Item label="Sex" name="sex" valuePropName="checked">
  <Radio.Group defaultValue={1}>
  <Radio value={1}>男</Radio>
  <Radio value={0}>女</Radio>
  </Radio.Group>
 </Form.Item>

 <Form.Item {...tailLayout}>
  <Button type="primary" htmlType="submit">
  register
  </Button>
 </Form.Item>
 </Form>

关于antd form表单select设置初始值的操作就介绍到这，本文代码有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多antd form表单的内容，大家可以关注其它的相关文章。

文本转载自脚本之家