antd-react使用Select组件defaultValue踩的坑

最新推荐文章于 2024-06-13 10:54:16 发布
最新推荐文章于 2024-06-13 10:54:16 发布
阅读量1.9k 收藏 5
点赞数 8
分类专栏： antd 文章标签： react.js 前端 前端框架 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48336579/article/details/119909310
版权
在antd的React应用中，作者遇到Select组件defaultValue的问题：每次打开新的抽屉，下拉框显示的值与选中的ID不符。经过一系列尝试，包括更新组件状态、传递父组件状态、使用Form的setFieldsValue，最后通过给抽屉添加唯一key成功解决了这个问题。
摘要由CSDN通过智能技术生成

需求背景：

有一个表格, 点击表格每一行的一个叫"查看数据记录"的按钮,打开一个抽屉, 会调后端一个接口(这里我们叫它接口A), 其中一个参数是抽屉里下拉框选中的当前id(就是下文中的pid)

问题描述：

       表格每一行红框圈出来的这个按钮(图1), 点击后会弹出一个抽屉(图2), 抽屉里面有一个下拉框, 需求要求每次打开都默认选中"主版本",  遇到的问题是: 打开表格第二行的抽屉, 此时改变下拉框使其选中"分支一",  然后再去打开表格第三行的抽屉, 下拉框选中的id是"主版本"的id, 但是显示的依然是    "分支一"的名字!

                                                                         图(1)

                                                                            图(2)

 ----------------------------------------------------------分割线-------------------------------------------------------------

原因分析:

最低0.47元/天 解锁文章
半糖气泡。
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
react select 标签 defaultValue 和 value 踩坑日记
weixin_47192515的博客
11-10 1050
分析：value需要接收一个动态数据，dayjs().get(“month”)是一个死值。分析：defaultValue只在页面挂载时渲染一次，后续数据发生变化，不再重新渲染。第二版：修改为value，点击select，发现数据更新了，但页面不更新；第三版：使用value绑定动态数据，且绑定onChange监听函数。第一版本：使用defaultValue，发现刷新页面，数据错误。最近在写react项目，需要设置下拉框默认值.
Antd中Select组件中的defaultValue设置不生效
weixin_39818813的博客
11-26 1483
在Select 组件中添加一个key， 值为你所需要的 defaultValue，注意是在。
antd的select的defaultValue通过form.getFieldsValue获取不到
最新发布
我不写文章，我只是文章的搬运工
06-13 425
如果你希望在组件挂载后立即获取表单字段的值，可以在组件的。：如果你的默认值是异步获取的，确保在设置默认值后再渲染。组件已经初始化完成，并且所有字段都已经注册到表单中。确保你已经正确设置了这些属性。在使用Ant Design（简称antd）的。组件是一个受控组件，这意味着你需要使用。，这样在表单初始化时就会使用这个值。，可能会遇到一些问题。组件中，你可以设置每个字段的。组件的受控属性更新有关。：如果你在表单外部更改了。方法注册到表单中的，这样。组件时，如果你希望使用。
关于antd-react使用Select组件的defaultValue踩坑及解决方案
不怕麻烦的鹿丸的博客
05-24 1780
在有些项目中，使用antd里的Select组件初始化下拉选项之后，我们可能会有多个tab的切换需求，每一次切换都要改变Select组件的下拉选项数据，以及默认选项，但这时候就可能会出现一种情况就是，我们切换了tab之后，下拉选项的数据是更新了，但是输入框里的默认选项却是我们上一个tab里选中的值，而不是我们切换后的tab的默认的值，即。在Select组件里添加一个key，key值可以设置为tab切换的变量（关于这点，官方API文档好像没有提到）。
Ant Design vue使用组件select设置default-value
weixin_46181037的博客
04-13 8480
Ant Design vue使用组件select设置default-value一、效果图二、代码1、将default-value设置为固定的值2、动态将default-value设置为数据的第一个总结 一、效果图 二、代码 设置 key 和 default-value 的值相同 1、将default-value设置为固定的值 <!-- html代码 --> <a-select :key="DefaultValue" :default-value="DefaultValue" style
react antd select 对象_企业级的 UI 设计语言， React 实现 Ant Design
weixin_39552768的博客
01-31 101
Ant Design一套企业级 UI 设计语言和 React 组件库。✨ 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 React 组件。 使用 TypeScript 开发，提供完整的类型定义文件。⚙️ 全链路开发和设计工具体系。 数十个国际化语言支持。 深入每个细节的主题定制能力。 支持环境现代浏览器和 IE11 及以上。支持服务端渲染。ElectronIE / Edge...
[踩坑]Antd中Select组件中的defaultValue问题
寬真
02-09 1万+
[踩坑]Antd中Select组件中的defaultValue问题 我遇到一个类似下面的问题：antd Table columns render中return了一个Select，这个Select设置了defaultValue,第一次更改了这个值，然后通过Modal弹框，在弹框中更改了数据，本来是想重新渲染了Select的默认值的，始终没见效，这里面说加key,我觉得清缓存都可以加key,明天试一...
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1230
antd-react 组件库工作以来的总结
【React+antd】antd 4.X Select组件 传入defaultValue变化 展示不变
all_might1的博客
01-10 963
一、问题描述 升级antd到4.x之后，官网文档上发现没有提及initialValue，于是使用了defaultValue。 改组件设置初始值，从接口调入。页面初始进入接口没有返回的时候，对应数组数据为空；等到接口返回数据后，对应数组也塞入正确数据，但是Select组件展示表现还是为空。（我用的是多选） 二、解决思路 因为之前解决过一个 打开列表中不同Drawer，展示数据不变化的问题。所以联想，会不会是在页面...
react写一个select组件的实现代码
12-08
之前一直用的antd的Select组件，但在有些端并不适用，而原生的select样式修改不灵活，遂产生自己写一个组件的想法。观察select组件： <select onChange={(value) => {this.value=value}} man woman </select> 可以看出数据都是在option中，有值value和显示出来的数据一一对应。如果我们写一个select组件，那么应该有onChange方法，应该要访问到子元素，而且div是没有value这个属性的，
antd Form 组件使用 Select 组件设置 defaultValue 报错 defaultValue is invalid for getFieldDecorator ...
热门推荐
m0_37148591的博客
05-06 2万+
前言 日常积累，欢饮指正 问题描述 错误代码段 import * as React from 'react' import { Card, Form, Select } from 'antd' const Option = Select.Option import { FormComponentProps } from 'antd/lib/form' interface IState { /...
antd picker 使用 如何_React实现滑动选择插件（仿Antd-mobile Picker）
weixin_39946274的博客
12-20 1393
效果图需求由于移动端iOS和安卓原生select样式和效果不同，同一个控件在不同系统上效果不同。所以决定制作一个跟iOS风格类似的，可以滚动，选择器插件。之后看到了antd-mobile里面的picker插件符合我们的要求，使用了一段时间感觉其效果不错，隧查看源码，探究其制作过程。但是antd-mobile是Typescript编写的，跟React类似，但是又不太一样。所以基本是关键问题查看其做参...
Antd中Select组件中的defaultValue问题
g2526的博客
08-18 1640
bug: select值是异步加载，需要默认选中第一项，但是没有选中 解决方案: 在Select 组件中添加一个key， 值为你所需要的 defaultValue 感谢大佬：https://www.jianshu.com/p/fbcbe49b1eed
React 中select设置defaultvalue失效问题
qq_38560696的博客
01-18 2117
如果设置的值是通过props传入组件，使用defaultvalue是没问题的。 使用usestate直接赋值或者直接定义变量，然后在select中赋值給defaultvalue也是没问题的。 如果用usestate设置的值开始为空，然后在useeffect中初始化时，单独使用defaultvalue就不会设置成功，为最开始的空值，有人说这是react存在的bug，select没有被重新渲染。解决方案是在select标签中添加key，key的值通过defaultvalue的值判断 如：ke...
react antd select 对象_你想知道的React组件设计模式这里都有(下)
weixin_33946659的博客
01-30 165
本文梳理了context模式、组合组件、组合与继承这三类React组件设计模式往期回顾：你想知道的React组件设计模式这里都有(上)上一篇介绍了三种设计模式，包括：容器与展示组件；高阶组件；render props。这篇我们继续介绍三种设计模式，包括：context模式 ；组合组件 ；继承模式。为了更好的理解，你可以将相应源码下载下来查看：https://github.com/imal...
React + Antd 自定义Select选择框 全选、清空功能
HUMM
11-09 2157
【代码】React + Antd 自定义Select选择框 全选、清空功能。
react antd select组件的值如何修改
03-24
要修改 react antd select 组件的值，可以使用 onChange 事件来实现。具体代码如下： ``` import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; function handleChange(value) { console.log(`selected ${value}`); } function App() { const [value, setValue] = useState('jack'); function handleSelectChange(value) { setValue(value); } return ( <Select value={value} onChange={handleSelectChange}> <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="disabled" disabled> Disabled </Option> <Option value="Yiminghe">yiminghe</Option> </Select> ); } export default App; ``` 在上面的代码中，我们使用 useState 来定义一个 state 变量 value，然后在 handleSelectChange 函数中更新这个变量的值。最后将 value 作为 Select 组件的 value 属性传入即可。当用户选择不同的选项时，会触发 onChange 事件，从而调用 handleSelectChange 函数来更新 value 的值。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值