antdpro 中 使用 antd select 组件,defaultValue 与 value 使用问题
背景
简而言之,就是业务需求中虽然使用了 ProTable,但是表格列中有处理人,处理状态等需要下拉框显示的,于是用了 render 方法,结合 antd select 组件来实现。
原本是打算用 ProSelect 的,但是属于 ProForm 里面的组件,直接使用会有样式问题,还是放弃这个做法了。
使用 defaultValue
使用 defaultValue 的时候下拉切换的时候很流畅,当你下拉选择某个值之后,下拉框会先显示那个值然后再去请求接口,这个交互没啥问题。
但是这里有其它问题就是,有这个需求,最后一个列是操作列,点击某个操作,进行「提交」之后,要同步得把「处理状态」改为已处理,如果使用 defaultValue 的话,就算是用了 tableRef 的 reload 重新 request 一下,那个列也不会刷新,很奇怪…
使用 value
后面改成了 value,因为看了文档说是 onChange 在 value 改变的时候也会变,那么确实解决了这个问题,但是…
如果直接进行下拉选择的话还是会有问题,和之前正常的显示逻辑不一样了。
效果就是下拉选择之后会根据当前 value 来请求接口,当接口请求完成之后,才会显示我们下拉的值,这种交互不是特别好,如果接口请求比较慢,对用户来说还以为是没有进行修改,会有一个等待时间。
各种尝试
在 defaultValue 与 value 使用问题中,我也进行了许多的尝试,比如用自定义 hook,useRefresh 来刷新一下,看是不是没刷新问题,以及再用 render 中第四个参数 action 也尝试了一下,原本想着看能不能和产品沟通一下之前的效果可不可行,后面想着应该还是会有人接触这种逻辑需求的。
终于解决
昨天一下午就在看这个问题,一直也没想明白,做了许多尝试也,下班之前依旧还在想怎么弄,可能也是卡在某个点了,就先回家休息了,想着明天带着清晰的头脑在理一理。
今天早上就搜了一下,没想到就搜到了,也解决了。
就是将 defaultValue 和 key 绑定同一个值即可。
参考
http://react-china.org/t/antd-select-defaultvalue/15304/8
最后,感谢大佬们的付出与帮助,受教了,因此我也回馈一下写下此文记录一下。
学如逆水行舟,不进则退
antdpro 中 使用 antd select 组件,defaultValue 与 value 使用问题相关推荐
- antd Select组件 和 Dropdown组件 踩坑·记
目录 一.踩坑记 1.Select 组件需要显示 value 但传递给后台的是 key 2.Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题 3.Select 组件滑动下拉框数据 ...
- vue3 中使用antd UI组件
之前搞pc端的 会使用element的ui组件 现在 vue3 来了 顺便也更新试用下 vuu3中的ui组件 不过好像 element还没更新支持 vue3 所以先用antd 来试试看 1. ...
- antd Select组件单选框自定义输入和可选择输入功能实现
函数组件中的用法 const [searchValue, setSearchValue] = useState(''); const onSearch = curentValu ...
- 支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)
功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随 ...
- elementui select组件选中后无法自动刷新更新值渲染到页面中
2019独角兽企业重金招聘Python工程师标准>>> elementui select更改选中值后,无法渲染到页面中? 在select组件中添加了@visible-change=& ...
- antd 函数组件_react函数组件中引用antd<Form/>组件demo
```xml import React, { forwardRef, useEffect } from 'react'; import { Input, Select, Row, Col, Butto ...
- html5 input select,【Web前端问题】select如何实现既可以像input那样支持输入,又可以从下拉中选择? antd...
不可以多选,使用tags属性的时候会支持多选,希望能够保存自己输入的内容, 网上找的答案说是用combobox跟tabIndex={0}这两个属性,试了下是不起作用的,我当前用的antd版本是3.15 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- React中使用antd的select报错Unable to preventDefault inside passive event listener invocation.
问题描述 报错Unable to preventDefault inside passive event listener invocation. React中使用antd的select报错 Unab ...
最新文章
- 截取前四位字符串_Python的字符串切片
- 操作系统 chapter 12 死锁
- [云炬ThinkPython阅读笔记]1.6 形式语言和自然语言
- 【直播回放】中外大厂奇葩说:谁是技术圈的嘴炮王者?
- python归一化sklearn_用sklearn进行对数据标准化、归一化以及将数据还原详解
- vb红绿灯自动切换_VB红绿灯程序
- mf模型 svd++_序列推荐模型(一): FPMC
- Naughty Stone Piles(CF-226B)
- linux添加phoenix引导,在linux怎么执行phoenix 脚本
- 单例模式 java 实现_单例模式
- html 图片移动动画,HTML5移动端图片左右切换动画DEMO演示
- 华为今年不会推出运行鸿蒙OS的手机;Deno 1.3.2发布|极客头条
- 7.15 HTMl + CSS 笔记整理(一)
- VC6和VS2005(及2010)的一些区别总结
- 【scratch案例教学】Scratch弹力球小游戏 scratch编程案例教学 少儿编程教案
- 抱明月而长终;知不可乎骤得
- 图片预览(原生js实现)
- 王冰玉时代曙光科技 丽江-稻城-理塘-丹巴-康定-成都“中心"穿越小卡片之旅...
- 科普“知识共享”严重缺失,国内亟待补课
- 亚马逊云服务(AWS)中国宁夏及北京区域正式上线Amazon SageMaker
热门文章
- Caused by: java.lang.NoSuchMethodException: xx.<init> [class android.content.Context, interface
- 怎样检测计算机硬件是否正常,怎么检查电脑硬件是否有問題
- python爬虫之采集360搜索的联想词
- LTC6268-10 4GHz 超低偏置电流 FET 输入运算放大器
- 计算机禁止用户登录,win7系统禁止显示用户登录信息的设置方法
- win10 Telnet服务器 解决telnet正在连接127.0.0.1...无法打开到主机的连接 在端口 23: 连接失败
- 电磁兼容(EMC)的标准与测试内容
- [console] early printk实现流程
- 数据库实验六 存储过程
- 浅谈运营商网络业务限速(上)