解决 antd中select下拉赋异步默认值问题

最新推荐文章于 2023-04-20 22:56:55 发布
最新推荐文章于 2023-04-20 22:56:55 发布
阅读量851 收藏 2
点赞数
文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Arange_/article/details/129755588
版权

最近写增删改查也是写的头疼不已，但还好，这套业务逻辑已经摸的差不多了。

今天写下拉的时候遇到一个问题，就是select的默认值，一般情况下是给defaultValue或者用form表单包着然后给initvalValue。

但是今天遇到一个小小的需求是，下拉给的默认值，要是进入页面后接口返回回来再给赋值的，这样就卡住了，defaultValue和initvalValue都不生效，改用value也不生效。最后在网上翻了半天尝试性给select加一个key，居然就奇迹般的生效了。

再不生效我都要问人了前期，虽然不知道什么原理但是有用，浅浅的记录一下

在这里插入图片描述

蓝色鼠标垫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd select的默认值 动态 或者静态设置
zhangyubababa的博客
04-27 4240
设置select option的默认值！ 就是设置select 有一个defaulValue props 设置和option对应 就是select的默认值
antd 动态添加表单_antd Select下拉菜单动态添加option里的内容操作
weixin_42484898的博客
12-29 4767
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式let giftScope =[{code:200,id:1,name:"张三"}, {code:300,id:2,name:"李四"}, {code:400,id:3,name:"王五"}, {code:500,id:4,nam...
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
山外小楼
09-29 2526
Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值
antdv表单下拉框默认值问题
nanciii_的博客
10-26 2286
在工作中遇到这样一个需求场景：需要给下拉框添加默认值，且在新增数据后自动更新该默认值为新增的那一条。 心想这还不简单，直接给下拉框添加属性defaultValue="xxx"不就好了。然而事情并没有想象的简单，使用该方法后默认值并不生效。 <a-select placeholder="请选择目录名称" style="width: 170px" :defaultValue="dirList[0].dirId" v-model="form.dirId" allowClear> <
antd多选框 ＜a-select mode=“multiple“ ＞动态加载初始化时有空选择项的问题
qq_38854533的博客
03-03 1696
antd多选框 动态加载初始化时有空选择项的问题
react ant-design表单获取不到Select值或者初始化默认值不生效(封装的表单元素值）
qq_26889291的博客
01-19 2435
<GftSearch onChange={(data) => { console.log('data',data) }} onChange给 GftSearch组件就好了，然后在GftSearch里面的onChange里面调用this.props.onChange(value) // value是onChange回调的value
antd Select组件远程搜索设置默认值
weixin_44120296的博客
03-03 1684
antd Select组件远程搜索设置默认值 基于React和mobx的一个tools项目，其中的Form搜索条件大部分要求的是通过接口的支持模糊搜索。由于条目很多，所以要求多加默认值。以上是背景,下面进入主题 useEffect(() => { const value = form.getFieldValue("orderPrefix"); store.mappingAPI(value).then(() => { setMapList(store.mapping);
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
antd的联级选择器异步调用编辑回显_antd Select下拉菜单动态添加option里的内容操作...
weixin_26899659的博客
01-17 1353
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式let giftScope =[{code:200,id:1,name:"张三"}, {code:300,id:2,name:"李四"}, {code:400,id:3,name:"王五"}, {code:500,id:4,nam...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
Ant Tabs Select 使用key切换 Select的默认值是前一个下拉框选择的值
北枫林
11-09 534
解决办法：给<Select>加上一个属性value，在切换后select的默认值就会是nameorage这个值 const [nameorage, setNameorage] = useState("请选择"); <Select defaultValue="请选择" value={nameorage} onChange={(value) => { setNa
Ant Design 常见用法与坑点总结（二）：Form 表单下拉框设置初始值
最新发布
weixin_45138590的博客
04-20 2276
Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。因此，了解 Ant Design 的常见用法与坑点还是有必要的。本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。
爬坑！！antd中select组件的defaultValue取不到数据问题
a_l_f_的博客
10-25 4497
爬坑！！antd中select组件的defaultValue相关问题 需求一：是这样的，想要在下拉菜单的框里首先显示一个默认值，默认下拉菜单的第一项，而不是placeholder。 但是由于下拉菜单是请求回来的数据，因为你不能在页面渲染的时候就直接展示出数据，所以有了一个解决办法！使用key！！！让key值等于defaultValue的值。 const [activites, setActivites] = useState([]); ... useEffect(() => { setActivit
antd select 赋值的注意事项，值赋不上的解决方案（必须类型相同才可以）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-17 5690
react antd select 注意事项 及踩坑
vue+antd+select下拉初始化赋值
热门推荐
浩星
11-19 1万+
前言： antd的功能是挺好的，但是在他的下拉这里初始化赋值是很不友好的，我这里的需要时新增置空，修改赋值的需求，他的自带功能defaultValue满足不了需要，他只在创建的时候赋值一次，我们修改就需要每次点击都赋值上去，我们这里用value来实现，但是vue中的value使用跟react中还是有很大区别的，这里来记录下我解决这个问题的办法。 实现效果： 实现步骤：...
解决antd中form表单包含Select下拉框默认值与下拉框中的值关联问题
m0_60353695的博客
09-10 3450
问题描述：在Form表单中，下拉框多选的情况下，如果点击的是编辑按钮，会在表单中传递默认值，但是表单中的默认值和下拉框中的值没有关联，导致再次选择下拉框中的值还会再次选中 <Form.Item name="color" label="color" rules={[{ required: true }]} initialValue={['白色','灰色']}> <Select allowClear
ant-design-vue 下拉框展开事件赋值数据源
Jack, what else can you do besides holding your little darling?
08-24 537
ant-design-vue 下拉框展开事件赋值数据源
解决select（antd-design组件库）默认选中请求数据的第一项。
congxue666的博客
02-19 5700
出现这种问题的原因：一般我们的select的下拉项的数据都是请求接口出来的，但是会出现这样问题，请求数据是需要一定的时间（比如这个接口是异步请求），可能接口还没请求出来页面都已经渲染完成了。那么等这个接口请求出来，默认选中第一项也就不会再生效了。 解决方式：一般这个下拉菜单接口的数据是这样的形式，list：[{id:1,value:'中国',...},{id:2,value:'美国,...'}]。当页面初始化的时候，我们可以进行判断，如果接口数据请求出来了，并且我们没有选择下拉框选项的时候，就把路由重置到
antd中fileList如何进行异步展示
03-24
antd中的fileList可以通过设置action属性来进行异步展示，具体实现方式如下： 1. 在组件中设置action属性，指定上传文件的接口地址。 2. 在上传文件成功后，将文件信息添加到fileList中。 3. 在组件中监听fileList的变化，当fileList发生变化时，重新渲染组件，实现异步展示。 示例代码如下： ``` import { Upload, message } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; class Avatar extends React.Component { state = { loading: false, imageUrl: '', fileList: [], }; handleChange = ({ fileList }) => { this.setState({ fileList }); }; render() { const { loading, imageUrl, fileList } = this.state; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>上传</div> </div> ); return ( <Upload action="/api/upload" listType="picture-card" fileList={fileList} onChange={this.handleChange} > {fileList.length >= 1 ? null : uploadButton} </Upload> ); } } ``` 在上面的示例代码中，我们通过设置action属性来指定上传文件的接口地址，然后在handleChange方法中将上传成功的文件信息添加到fileList中，最后在组件中监听fileList的变化，实现异步展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值