antd4中select当前展示的内容是多个拼接而成的进行输入过滤

最新推荐文章于 2024-04-27 23:15:17 发布
最新推荐文章于 2024-04-27 23:15:17 发布
阅读量403 收藏 12
点赞数 6
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55857195/article/details/135138500
版权

这里我们的select框展示的文字是多个拼接的，我们就再传的时候label给整个对象传过去，然后更具select属性中的filteroption来对数据进行指定字段的过滤

不断成长的小菜鸟
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Geolocation校正GDAL不支持的数据
GDAL专栏
03-28 3019
对于低分数据来说，常用的校正方式就是给定数据的经纬度查找表来进行校正。在GDAL中，这种校正方式叫Geolocation array。常用的数据有国外的MODIS数据，国内的如风云系列（FY）和海洋系列卫星（HY）都是使用这种方式来进行处理。 GDAL库读取MODIS数据（HDF格式）的时候，会自动读取里面的经纬度查找表，并构造一个叫做GeoLocation的元数据段。如下所示： 只要有这个
antd 下拉框怎么联动_深入理解Antd-Select组件的用法
weixin_36060333的博客
12-30 2503
一、Antd-Select提供几种类型最基础版只提供下拉功能的选择器带搜索功能的下拉选择器可多选的下拉选择器可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)多级联动下拉选择器搜索远程数据下拉框二、一些潜在用法如果Select.Option选项的数量特别大:2k、3k...假设请求数据时间我们都解决好了,信心满满地准备把数据填充到后下班!过会你会发现有多绝望..这下拉框加载了10s还...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。 当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。 想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。 我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉
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的select组件使用心得
qq_44144735的博客
12-27 3669
使用antd UI框架中的select需要注意的一些问题 问题1：滚动跟随问题 问题描述：使用表单时，当页面过长出现滚动，select的下拉框不会跟随输入框，造成用户体验性不好 解决方法：在 Option 或Select.Option 中添加 getPopupContainer={(triggerNode) => triggerNode.parentNode}，完美解决 问题2：可输入过滤选...
select是多选的，可查询多个动态表格，多表格分页问题解决方法
weixin_45481456的博客
05-07 480
import React from "react"; import Form, { FormComponentProps } from "antd/lib/form/Form"; import { StyleAntdTable } from "../../components/style-antd-table"; import { Table, Tooltip } from "antd"; import { ImportExportListColums, ImportExportListIn, Pagi..
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 (item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={true} //初始时展开所有行 pagination={{ pageSize: 5 }} //...
在React函数组件中使用错误边界和errorElement进行错误处理
笔记、经验、日常分享
04-24 392
ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。
react引入iconfont的svg图标
qq_23858785的博客
04-23 357
react引入iconfont的svg图标
【2024官方文档版学习笔记】React-脱围机制
不被定义的程序媛写的博客儿
04-24 1030
React 有一些内置 Hook，例如useStateuseContext和useEffect。有时你需要一个用途更特殊的 Hook：例如获取数据，记录用户是否在线或者连接聊天室。虽然 React 中可能没有这些 Hook，但是你可以根据应用需求创建自己的 Hook。学习链接祝大家学习顺利。
react之渲染与props
weixin_73918953的博客
04-23 948
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
如何在React中构建动态下拉组件 - 解释React复合组件模式
晓风晓浪
04-23 489
下拉菜单长期以来一直是网站和应用程序中的重要组成部分。它们是用户交互的默默英雄，通过简单的点击或轻触默默地促进着无数的操作和决策。今天你可能已经遇到了其中之一，无论是在你最喜爱的在线商店上选择类别，还是在注册表单上选择你的出生日期。但如果我告诉你，有一个秘密配方可以将你的下拉菜单从平凡提升到华丽呢？加入我，我将解剖复合组件模式的奥秘，并利用其能力构建一个动态下拉组件。（本文视频讲解：java567.com）
【React Router】快速使用
小秀的博客
04-22 498
Outlet：相当于 Vue Router 的 router-view；需要有嵌套 ROute 或者 useRoutes 中使用children 属性的配置，children 对应一个数组，数组里是一个个路由。NavLink：和 Link 一样会被渲染为 a 标签，和 Link 的区别是他有一个名为 active 的激活样式，所以一般用于顶部或者左侧导航栏的跳转。Navigate：重定向，类似于 useNavigate 的返回值函数，但这个是组件。Route： 书写对应的路由和对应的组件。
day04--react中state的简化
weixin_51938803的博客
04-27 239
答：对于创建一个实例对象时，我们对要传进来的数据进行接收，那么我们必须要写一个构造器来接收传进来的数据，但是如果我们要定义的数据是固定的，那么就可以不使用构造器的形式，而是使用赋值语句的方式定义一个属性接收数据。既然我们要传的数据是固定的，那么就不需要构造器，直接使用赋值语句的方式定义属性，那么通过赋值语句定义的属性都会放在实例对象身上。而对于下面的switchover 方法来说，必须使用箭头函数的形式，此时的this指向的就是实例对象，否则this为undefined。state是在构造器里面定义的。
react经验13：使用非react封装的富文本组件
Comvir的专栏
04-23 297
已知开源社区已经有react封装的富文本组件，一般的文本编辑需求足够满足，但是当有特殊需求无法满足时，可能需要用到非react封装的富文本组件。当使用非react封装的富文本编辑器时，react组件内的state与编辑器的内容交换有点小毛病，本经验给出解决思路。
react之state深入浅出
最新发布
weixin_73918953的博客
04-27 465
设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。要在一个事件中多次更新某些 state，你可以使用更新函数。你可以在state中存放任意类型的JavaScript值。到目前为止，你已经尝试过在state中存放数字，字符串和布尔值，这些类型的值在JavaScript中是不可变的，这意味着它们不能被改变或是只读的。你可以通过替换它们的值以触发一次重新渲染。从技术上讲，可以改变对象自身的内容。
类组件antd form中input框和select的内容都会拼接展示到最后一个input框中
07-14
在Ant Design的Form组件中，您可以使用`getFieldDecorator`方法来创建输入框和选择框，并将它们的值拼接展示到最后一个输入框中。下面是一个示例代码： ```jsx import { Form, Input, Select } from 'antd'; const { Option } = Select; class MyForm extends React.Component { handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { const { field1, field2, field3, field4 } = values; const concatenatedValue = `${field1}${field2}${field3}${field4}`; console.log(concatenatedValue); // 在这里可以根据需要进行后续操作 } }); }; render() { const { getFieldDecorator } = this.props.form; return ( <Form onSubmit={this.handleSubmit}> <Form.Item> {getFieldDecorator('field1')(<Input placeholder="输入框1" />)} </Form.Item> <Form.Item> {getFieldDecorator('field2')(<Input placeholder="输入框2" />)} </Form.Item> <Form.Item> {getFieldDecorator('field3')(<Select placeholder="选择框" />)} </Form.Item> <Form.Item> {getFieldDecorator('field4')(<Input placeholder="输入框3" />)} </Form.Item> <Form.Item> <Input value={concatenatedValue} disabled /> </Form.Item> </Form> ); } } const WrappedMyForm = Form.create()(MyForm); ``` 在上面的代码中，我们通过`getFieldDecorator`方法为每个输入框和选择框创建了一个装饰器。在`handleSubmit`方法中，我们通过`this.props.form.validateFields`获取了所有字段的值，并将它们拼接到`concatenatedValue`变量中。最后，在最后一个输入框中，我们通过设置`value={concatenatedValue}`将拼接后的值展示出来。 请注意，上述代码仅为示例，您可能需要根据自己的具体需求进行适当的修改和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值