解决ant Design中Select设置initialValue时的大坑

2024-09-27 07:36:10

我出现的问题：例如在编辑活动关联红包的时候，需求是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>

补充知识：ant 组件initialValue 初始值更新问题，setState和setFieldValue浅谈

组件被赋初始值了之后，有两种情况需要更新组件的value，一种情况是子组件触发的父组件的value的更新，另一种是父组件自己触发的value更新。

实现场景

在门票订购页面引入了一个游客信息子组件，如下图所示，可以通过子组件新增游客或删除游客来改变订购数量，也可以通过在订购页面批量导入游客来改变订购数量。

 <FormItem {...formItemLayout} label="数量">
  {
   getFieldDecorator('number', {
     rules: [{
      required: true, message: '数量',
     }],
     initialValue: this.state.peopleNum
    })(<InputNumber disabled={true} style={{ width: 120, height: 33 }} onChange={this.peopleNumChange} />)
   }
</FormItem>

起初若是子组件触发的更改就调用父组件的回调函数，函数中使用this.setState({peopleNum})的方法来更新，若是父组件自己触发的更改就直接调用this.setState({peopleNum})来更新InputNumber的值，后来发现state的值更新了，但是并没有改变InputValue的值，因此就通过 setFieldsValue来解决该问题，发现setFieldsValue直接设置值比this.setState设置initialvalue的等级更高一点。

 peopleNumChange = (value) => {
  const { setFieldsValue } = this.props.form;
  this.setState({
   peopleNum: value,
  });
  this.props.form.setFieldsValue({
   number: value,
  })
 }

ant 自己封装的table组件initialValue 初始值更新问题

实现场景

在门票订购页面引入了一个游客信息子组件，如下图所示，可以通过子组件新增游客或删除游客来直接改变子组件中游客信息，也可以通过批量导入游客信息的方式间接改变子组件中游客信息。最后父组件获取到全部游客信息在提交给后台。

<div style={{ marginTop: 20 }}>
{getFieldDecorator('info', {
initialValue: this.state.info,
}
)(<OrderPeople handlepeople={this.peopleNumChange.bind(this)} handlecantact={this.cantactNumChange.bind(this)} />)}
</div>

OrderPeople为封装的子组件，组件内部有两个函数，保存函数和删除函数，这两个函数对表格数据进行更改之后要更新父组件中的游客信息，此时父组件会向子组件自动传递一个onChange函数，使用onChange函数来更新父组件的Value值，这里内部实现是用的setFieldValue改变组件的值

remove(key) {
 const newData = this.state.data.filter(item => item.key !== key);
 this.setState({ data: newData });
 this.props.onChange(newData);
}

在组件外部进行批量导入的时候，对info数据进行修改，起初数据改变之后，在父组件中尝试setState发现无效，后改成setFieldsValue才生效，组件的值通过setFieldValue置了某个值之后，就不能通过setState改变initialValue来改变其值了。

for (var i = 0; i < data.length; i++) {
  data[i].key = `NEW_Excel_ID_${i}`;
 }
 this.setState({
   info: data,
 });
setFieldsValue({
  info: this.state.info,
 });

注意：initialValue设置的值本应该属于Select可供选的数据中某一个,select框显示的内容就是我们所希望的红包名称，提交form表单的时候，值就是Id；如果设置的值在Select可供选数据中找不到（例如：这里的select可供选数据是redPackets），那么显示的就是Id而不是名称。

所以我们在设置initialValue的时候，应该填写的是下拉列表中包含option的value的值。

以上这篇解决ant Design中Select设置initialValue时的大坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

场景描述: 如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值: <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <F
在vue项目中引用Antv G2,以饼图为例讲解

我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: //引入G2组件 import G2 from "@antv/g2"; export default { name:"", //数据部分 data(){ retur
在Vue中使用Viser说明(基于AntV-G2可视化引擎)

前言 AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用. 安装viser-vue yarn add viser-vue yarn add @antv/data-set main.js中引入 import Viser from 'viser-vue' Vue.use(Viser) 定义d2demo.vue组件 <template> <div> <v-chart :forceFit="true" :height=&quo
解决ant Design Search无法输入内容的问题

我的问题:今天先根据手机号查询一个用户,根据文档引用Input中的Search,我添加了一个样式,发现输入框无法输入内容, 代码: return ( <div> <Search style={{ width: 300, float: "right" }} placeholder="手机号" onSearch={value => this.findAppUserByPhoneNo(value)} onChange={this.onChangeP
VUE和Antv G6实现在线拓扑图编辑操作

效果图如下: 我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. 也可以npm 方式引入. 2.写组件 export default { name: "index", components: {}, mounted() { this.initG6(); }, data() { return { action: '', name: '', f
ant design vue导航菜单与路由配置操作

此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select
解决ant Design中Select设置initialValue时的大坑

我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称错误效果图: 期待正确效果图解决方案:在默认值的后面加上一个空字符串进行转
解决ant Design中this.props.form.validateFields未执行的问题

在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错. 原因: 我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量. 注意: 1.使用validator 时,注意自定义方法中是否有错误:对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,
解决ant design vue中树形控件defaultExpandAll设置无效的问题

页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值结果: 设置defaultExpandAll无效,并不能展开所有节点原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe
Ant Design中使用css切换的问题及解决

目录 Ant Design使用css切换问题 1.绑定一个自定义属性 2.css模块化 3.Ant Design主题方案 4.css in js ant design中css样式覆盖问题 Ant Design使用css切换问题当想通过开关来控制主题颜色时,就必须控制css的变化,现就记录使用Ant Design切换主题过程中发现的一些问题. 切换主题的方法: 1.绑定一个自定义属性通过绑定一个自定义属性,一键改变html的整体样式.但缺点也很明显,他仅适用于原生的样式(css全部由自己定义)
解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&
vue用ant design中table表格,点击某行时触发的事件操作

使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件点击行,有一个customRow.
ant design中upload组件上传大文件,显示进度条进度的实例

Upload组件是自带上传进度,但是样式调起来很麻烦,我们要做的就是自定义一个首先页面要引入组件 Upload, Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭自带的列表 beforeUpload: (info) => { /* 上传前的钩子,可以用来判断类型,和大小 if ('是否符合类型') { return false } if ('是否符合类型') { r
ant design中实现table的表格行的拖拽

前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的完全没有思路, 然后就打开官网的文档进行观看.一开始准备写打开官网的一个文档是4.0的看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr

解决ant Design中Select设置initialValue时的大坑

相关推荐

随机推荐