再react项目中使用antd4的select下拉框实现输入查询功能

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量521 收藏 9
点赞数 10
文章标签： react.js 前端 前端框架 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55857195/article/details/135295658
版权

在一些实际使用antd4下拉框的时候有时候需要通过搜索过滤选项，不过当输入的值下拉框没有的情况下是不能把输入值返现在select的输入框中的但是目前需求是可以通过输入的值内容来进行查询筛选

hooks实现：

1：首先先创建form管理的的表单实例，并设置需要下来输入返现字段的state值

2:在把实例放到对应的form表单中

3：接下来就是上面方法的详情，主要是对当前字段的值在state中更新

4：最后在usereffect中监听上面三个字段值的变化来进行实时更新，并把对应的值复制在表单上

5：最后的效果

可以看到下拉框里面并没有这个值

最后成功将其返现子啊了下拉框的输入框内容中

不断成长的小菜鸟
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可进行输入编辑的select下拉框
10-29
下拉框选择已有固定value，也可以选择后进行编辑，也可以直接输入数值。
Antd Select实现即可搜索又可输入
weixin_45332700的博客
09-27 5768
Antd Select如何实现即可搜索又可输入的操作 1、进入Select组件随便找一个合适的组件 (不一定如图) 2、删除组件中冗余代码 删除后如下 <a-select v-model:value="name" show-search placeholder="Select a person" style="width: 200px" :options="options" //添加search事件 @search="fetchName"
AntDesign Select控件即可以输入又可以搜索选择
星宇大前端
07-04 4989
HTML <a-form-item class="fontls mb24" label="毕业院校" style="width:340px;" :label-col="{ span:6}" :wrapper-col="{ span: 15 ,offset:1 }"> <a-select
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这个效果。 1.利用浮动原理 设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。 2.flex布局
在react项目中使用antd的form组件,动态设置input框的值
01-18
问题： 创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了 原因： 点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用initialValue设置动态更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值，就可以解决了。 if (result.code===0) { if (result.data) { this.
在ant design vue中select添加输入框、固定按钮
qq_42458917的博客
03-29 1719
【代码】在ant design vue中select添加输入框、固定按钮。
antd中的a-select组件既可手动输入又可下拉选择
weixin_42234899的博客
01-30 5318
antd中的a-select组件既可手动输入又可下拉选择
ant design select 搜索同时支持输入和下拉选中
weixin_39818813的博客
12-08 4345
1. 远程搜索的时候，有数据返回，但是下拉展示的仍然是无数据。。。 2. 搜索输入框正常情况下只支持下拉选中，如果输入的内容查不到，那么在失去焦点的时候就置空输入框了，也就是没法保持输
ANTD Select组件实现可选择输入项 react
qq_43399352的博客
04-21 3293
当选择框使用关键字搜索，但是没有搜索到想要的项目时，可以回填不存在的项目。
antd select 实现可输入可远程检索并选择
Mia的博客
09-13 1171
antd slelect 实现可输入可远程检索并选择
react使用antd表单赋值,用于修改弹框的操作
01-18
1、使用getFieldDecorator的initialValue 2、在state里定义一个变量存表格的数据 3、给打开弹框的方法传个record 4、把表格里的值存到state 5、把在state里存的值传给弹框 6、获取传过来的值 7、在取消方法和修改成功后中给赋空值，要不然，点击添加的方法表单里面会有值 7、OK 补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
react实现antd线上主题动态切换功能
12-09
demo 框架选择： create-react-app + mobx + webpack5 + antdesign 说明 由于最近公司有多个主题的共存性，所以需要实现线上主题切换的功能，所以本文主要描述的是基于create-react-app之上的主题切换。 CSS切换 有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案，但是考虑到这种形式需要在页面切换的时候去reload，因为htmlDOM是在css与JS的结合产物，用户体验不是很好。 Less切换 单纯引入所有的less文件去做切换，这样不能实现css的动态加载了，会增加无用css文件的加载 最后通过比
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。 当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。 想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。 我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉
React基础知识大汇总
qq_36828822的博客
04-21 938
如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
React vs React Native写法上的不同
Ranye的博客
04-23 608
从标签和样式两个角度，快速从react过渡到react native
react引入iconfont的svg图标
qq_23858785的博客
04-23 321
react引入iconfont的svg图标
react之渲染与props
weixin_73918953的博客
04-23 909
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
React 15~18每个阶段更新了什么
04-26 441
React.createClass （弃用）class 组件函数组件（无状态、纯UI组件）堆栈diff（state1->state2->state3…、每个更新过程。
【React】CSS 局部样式
最新发布
小秀的博客
04-26 208
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
react antd select下拉框选中一个值后变为输入框
03-30
在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 以下是一个示例代码： ``` import React, { useState } from "react"; import { Select } from "antd"; const { Option } = Select; const options = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "orange", label: "Orange" }, ]; function Demo() { const [value, setValue] = useState([]); function handleChange(value) { setValue(value); } return ( <Select mode="tags" style={{ width: "100%" }} placeholder="Please select" value={value} onChange={handleChange} > {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> ); } export default Demo; ``` 在上面的代码中，我们将Select的mode属性设置为 "tags"，并且在handleChange函数中更新了组件的值。当用户选择一个预设的选项时，组件的值会变为该选项的值。当用户输入一个自定义的选项时，组件的值会变为输入框中的文本。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值