antd select远程请求，onChange的坑

最新推荐文章于 2023-10-22 23:38:22 发布
最新推荐文章于 2023-10-22 23:38:22 发布
阅读量2k 收藏
点赞数 2
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangsaishi4302/article/details/109291070
版权

问题描述

远程请求，options发生变化，选择和上次相同位置的option，onchange不会被触发。

举例

第一次选择第一个option ![](https://img-blog.csdnimg.cn/20201026153601368.png#pic_center在这里插入图片描述

结果: 在这里插入图片描述
重新搜索，依然选择第一个： 在这里插入图片描述
结果：在这里插入图片描述
展示的依然是第一次选择的option。
这是因为onChange没有被触发。

解决方法

用onSelect替换onChange。
onSelect在每次选择option的时候都会触发，onChange只有在选择不同option的时候才会被触发

hifumiyo1234
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这个效果。 1.利用浮动原理 设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。 2.flex布局
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。 解决办法： 使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <Select defaultValue={packag
antd-virtual-select:长列表优化antd select组件
05-12
开始 npm i antd-virtual-select 功能特性 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分 虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表，支持上万条数据渲染 对自定义列表项绑定原 Select 组件的各项方法和回调函数支持 同步使用 antd 组件下拉列表样式 同 antd select api 设置 mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} 属性可成为支持大数据渲染的 AutoComplete 组件 更多 antd 长列表渲染性能问题讨论可查看 antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器 使用 基本使用同 antd Select，只是使用 SuperSelect 代替 Select impo
深入理解Antd-Select组件的用法
10-15
主要介绍了深入理解Antd-Select组件的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
antd Select onChange获取除了value其他的值
localhost
09-17 7815
在日常工作中,有时候需要获取下拉选择框除了value其他的值,在antd 官网中 可以使用api labelInValue;每个选项的 label 包装到 value 中,会把 Select 的 value 类型从string变为 { value: string, label: ReactNode } 的格式 但是实际开发过程中这种远远不能满足需要: import { Select } from 'antd'; const { Option } = Select; const opts = ...
antd react select onchange事件以及button onClick事件
weixin_45725653的博客
03-24 5414
目录 前言 1.定义一个变量，用来存放点击事件的值。 2.定义onchange函数，拿到返回值 3.定义按钮的点击事件即button的onclick事件 4.选择器以及按钮 5.说明 前言 我想要达到的操作是：选择器可以展开信息，选中一个对象后（或者输入一个对象后），点击按钮，列表可以显示出这个对象的所有消息。 1.定义一个变量，用来存放点击事件的值。 比如说上面选择器的3个选项，点击他们，会分别给变量传递1,2,3这样的值，以此类推 id: any, id: 0,
antd组件onChange回调，需要立即执行改变value与防抖节省接口开销。
最新发布
BWater_monster的博客
10-22 1306
- 回调函数频繁调用，并且有较大的请求开销 - 可以使用防抖的方法解决次数频繁调用 - 回调的即时处理与防抖处理可分开处理 - 要注意防抖函数的定义，引用地址是否相同。
antd 下拉框怎么联动_antd Select组件联动onChange方法this.setState is not function
weixin_39915427的博客
12-21 772
如图，联动组件，现想实现选择年份，动态为选择月份中添加数据(如果选择17年，那么只加入1、2两月，之后月份不加)。代码：const provinceOptions = this.state.selectYear.map(province => <Option key={province}>{province}</Option>);const monthOptions ...
antd+react 中Select组件的常用事件及传参类型
清颖的博客
11-07 1万+
select下拉列表组件常用事件属性的说明，使用ant design与React开发的同学可以参考，ant design pro构建页面时有用到。
ant select onchange事件中setFieldsValue结果getFieldsValue得到的是undefined
随记
09-21 3445
在修改记录中的一个值时发现修改不了，该值在界面中使用的下拉框，设置了allowClear，在清空时其他控件值要跟着变动，清空触发不了select事件，就用了change事件，在change事件中用setFildsValue给下拉框设置了空字符串，结果提交后台时这个值成了undefined，mybatisplus更新策略是not-null，不更新值为null的字段，导致这个值无法更新，仔细查看文档，经多次尝试，发现了options.getValueFromEvent这个属性可以使用，代码如下 <a-s
自定义AntD Table rowSelection 的 onChange 参数 selectedRowKeys 的取值
weixin_43822134的博客
04-07 3940
自定义AntD Table rowSelection 的 onChange 参数 selectedRowKeys 的取值
vue+antDesign实现树形数据展示并表格父子级选中和取消联动；递归
Sunny_lxm的博客
10-24 5432
vue+antDesign实现树形数据展示并表格父子级选中和取消联动
antd pagination onchange 事件不触发，pagination onchange分页请求内容不正确。
Baron的技术blog
11-24 4266
1.antd pagination onchange 事件不触发 背景：无论是 table 内配置还是单独引入pagination组件， 均为正常使用。但是分页成功，onchange 事件却不触发。首先项目中其余页面也有用到分页组件，一切正常。这样就排出了antd 版本的影响。 然后在前端调试antd 源码，发现 total 值的类型不对。因为这个值是从后端直接取回赋值，后端传回来的类型是一个string（实际是因为http传输造成的转换）。 坑的地方就是，还能够成功分页，而且控制台并无报错提示，很不友好
antdv中Table组件点击当前行的任意位置选中
Hi~豆豆麻麻
08-24 3958
使用antdv的带有复选框或者单选框的table组件，只有在点击复选框或者单选框时才能选中当前行，不太方便操作，现在需要在点击当前行的任意位置就能选中当前行： 官网文档 vue代码 <a-table :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="id" size="small" :columns="columns" :dataSource="data"
ant-design-vue 表格使用单选的方法
热门推荐
今日最可爱YeahT
05-14 1万+
参考API：https://www.antdv.com/components/table/#components-table-demo-selection 1，type没有写的时候默认是多选的 ，type为 'radio'是单选的 <s-table ref="tableModal" size="middle" rowKey="id" :columns="devColumns" v-tableScrollBar...
antd select 实现可输入可远程检索并选择
Mia的博客
09-13 1207
antd slelect 实现可输入可远程检索并选择
select标签选择相同选项不触发onchange解决方案
weixin_51609337的博客
09-13 1479
想到了一个方法，就是在select下新增一个option标签，每次onchange时将select值重置为这个新增的option，这样就是每选一个将选中的值给新增的，就不存在选相同的了。在谷歌浏览器中可以实现select标签下选择相同选项就能触发onchange事件，但在火狐浏览器中select不回显选项内容。
antd Select
05-23
antd Select 是一个基于 React 的 UI 组件，用于从一组预定义选项中选择一个或多个选项。它提供了多种配置选项和自定义样式的方式，使得开发者可以根据自己的需求来定制化 Select 组件的外观和行为。在使用时，只需要将预定义选项传入 Select 组件中，并监听选项变化事件即可获得用户选择的结果。Select 组件在 Web 应用的表单设计中非常常见，具有较好的用户体验和易用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值