在antd Form表单中select设置初始值操作

253 阅读 0 评论 167 点赞

我是靠谱客的博主勤劳歌曲，最近开发中收集的这篇文章主要介绍在antd Form表单中select设置初始值操作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我就废话不多说了，大家还是直接看代码吧~

<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设置初始值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。