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


Posted in Javascript onNovember 02, 2020

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

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

Javascript 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
javascript new后的constructor属性
Aug 05 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jquery 插件学习(三)
Aug 06 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
js格式化货币数据实现代码
2013/09/04 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python中如何引入第三方模块
2020/05/27 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
绩效工资实施方案
2014/03/15 职场文书
网络编辑岗位职责
2014/03/18 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
英语系毕业生求职信
2014/07/13 职场文书
国企干部对照检查材料
2014/08/22 职场文书
地球上的星星观后感
2015/06/02 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js