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

 更新时间:2020年11月02日 10:44:33   作者:Jian_Shen_Zero  
这篇文章主要介绍了在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设置初始值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下
    2018-04-04
  • vue实现数字+英文字母组合键盘功能

    vue实现数字+英文字母组合键盘功能

    这篇文章主要介绍了vue实现数字+英文字母组合键盘功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue 请求后端数据的示例代码

    vue 请求后端数据的示例代码

    在vue中,我们如何通过请求接口来访问后端的数据呢?在这里简单总结了一个小示例,对vue请求后端数据实例代码感兴趣的朋友一起看看吧
    2022-09-09
  • vue实现目录树结构

    vue实现目录树结构

    这篇文章主要为大家详细介绍了vue实现目录树结构,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中简单的虚拟DOM是什么样

    Vue中简单的虚拟DOM是什么样

    这些年写前端vue时经常碰到虚拟DOM这个单词,但都是听到就算了,左耳进右耳出,知道有这么个东西就完了,因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识,给自己补补课
    2022-10-10
  • element中el-table局部刷新的实现示例

    element中el-table局部刷新的实现示例

    本文主要介绍了element中el-table局部刷新的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue封装一个右键菜单组件详解(复制粘贴即可使用)

    vue封装一个右键菜单组件详解(复制粘贴即可使用)

    关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

    vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置

    这篇文章主要介绍了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置,本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
    2019-11-11
  • Vue3.0静态文件存放路径与引用方式

    Vue3.0静态文件存放路径与引用方式

    这篇文章主要介绍了Vue3.0静态文件存放路径与引用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue代理报错404问题及解决(vue配置proxy)

    Vue代理报错404问题及解决(vue配置proxy)

    这篇文章主要介绍了Vue代理报错404问题及解决(vue配置proxy),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论