React 编辑、保存、初始值、模糊搜索select

已于 2022-06-28 16:00:43 修改
阅读量534 收藏
点赞数
文章标签： react.js 前端 javascript 前端框架 node.js
于 2022-06-28 15:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37207318/article/details/125502730
版权

需求概括：表单编辑、保存功能。

开发脚手架及运行环境：react，antdesign 4.X  ProComponents， node 14.18.0

EditableProTable表单渲染数据后，点击编辑按钮，select多选状态用户无法加载；原因为未按照select组件以key 、value的形式适配数据，需要与后端协调数据或前端将数据格式改为key-value形式。

第一步将请求下来的数据进行处理，处理成key-value，然后setDataSource

 第二步：把select的初始值也以相同的数据格式传递给子组件

第三步这里cv了一下网友自定义的selectTag组件，做了一些小改动，initialValue的数据结构是一个数组，里面是以{key:'',value:''}形式的对象，在onSelectionChange方法中setValue时也应该将数组的末尾添加一个对象，这样就保证在添加时新添加的人员与已存在的人员是同源数据。

第四步：通过record获取同源数据，将数据[{key:xx,value:'xx'},{key:xx1,value:'xx1'},{key:xxn,value:'xxn'}]进行处理，以xx，xx1...xxn的形式拼接

 不知道还有没有其他更好的的解决办法,不吝赐教 

安卓出身前端半路出家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-fuzzy-search::scroll: 一个用 React 编写的模糊搜索组件
05-31
React模糊 React 中的模糊搜索 安装 npm install --save react-fuzzy 基本用法 const list = [ { id : 1 , title : 'The Great Gatsby' , author : 'F. Scott Fitzgerald' } , { id : 2 , title : 'The DaVinci Code' , author : 'Dan Brown' } , { id : 3 , title : 'Angels & Demons' , author : 'Dan Brown' } ] ; < FuzzySearch list = { list } keys = { [ 'author' , 'title' ] } width = { 430 }
react select默认选项_react select默认值的初始化
weixin_39859394的博客
12-22 2563
select的defaultValue在初始化之后不会再重载哦，如果需要实现题目中的效果，需要给select加上value配合onChange函数来做。示例：state = {projects: [],value: ''}componentDidMount() {// 模拟ajax调用，成功之后把需要改变的默认值赋值给this.state.valuesetTimeout(() => {thi...
React之通过hooks实现模糊查询
Welkin_qing的博客
11-30 2682
文章目录一、单个模糊匹配二、多个模糊匹配（1）封装hooks（2）页面调用 一、单个模糊匹配 对于单个模糊匹配，代码如下： const [list, setList] = useState([]); //最后显示的option数据 import { map,debounce } from 'lodash-es'; const requestList = useCallback(async params => { try { //接口调取函数 const { data } = a
react hooks正则匹配模糊搜索
m0_62336035的博客
05-27 231
接收的参数是input或select框里的onchange事件拿到的value值
ace-react编辑器
最新发布
03-26
Ace编辑器是一个用JavaScript编写的可嵌入代码编辑器，它与Sublime、Vim和TextMate等编辑器的功能和性能相匹配。作为Cloud9 IDE的主要编辑器和Mozilla Skywriter（Bespin）项目的后继者，Ace编辑器提供了丰富的功能...
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
例如在document.body 自动位置小捆安装npm install --save react-dropdown-select网站动机react-select非常好，但是有时项目要求超出了它的能力范围用法进口： import Select from "react-dropdown-select";...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
react-select-element：React选择元素
02-22
React选择元素 React选择元素 react-select-element实现... const Select = require ( 'react-select-element' ) 在React中实施 任何一个： < Select index = { this . state . index } onChange = { ( index )
react写一个select组件的实现代码
12-08
在React中创建自定义`Select`组件，主要是为了在某些特定场景下替代原生的`select`元素，或者为了提供更灵活的样式定制和功能扩展。原生的`select`虽然方便，但其样式控制相对有限，对于追求个性化设计的项目来说...
react select默认选项,如何在react-select中设置默认值
weixin_35753431的博客
12-22 1399
I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code:const MySelect = props => ({...props}value={props.input.val...
【避坑指“难”】antd select 模糊搜索
椰卤工程师的个人博客
02-10 1388
<Select allowClear showSearch filterOption={(input, option) => { if (option && option.title) { return option.props.children.toLowerCase().indexOf(input.toLowerCase...
使用react实现select_react select案例
weixin_35112865的博客
02-05 2169
效果图：select 里的回填的值 和外面盒子的 数据保持同步更新。运用到的知识点：1、表单回填，双向绑定。2、redux3、@修饰器4、表单的onValuesChange5、select 的onDeselect (就是select里的删除回调)页面代码：import React, { Component } from 'react'import { connect } from 'react...
antd pro component - EditableProTable 表单重置
wangming0123的博客
07-29 4204
antd pro component - EditableProTable 受控情况之下，改变 dataSource之后，但是表格编辑组件还是记录上次编辑状态记录的数据，没有及时更新，解决办法就是手动更新表单（其实整个表格就是一个form） 开始干活，上代码！(代码直接从项目摘出来的，看起来有点乱，核心部分都在） // 声明form实例 const [form] = Form.useForm(); console.log('打印formValues：',form.getFieldsVal
antd,Select支持模糊搜索方法
weixin_60443351的博客
09-19 705
【代码】antd,Select支持模糊搜索方法。
antd Select 使用动态数据渲染选择项
datouniao1的博客
10-30 5228
2021年 11月30 日 晴 今天的天气比较好，星期天，也没有出去，最近在学习react，我也不知道学习这个有什么样的作用，其实我现在的工作是比较偏重于后端以及服务器相关的东西，但是总是想做个比较好的网站，有点实际的内容，网站做了很多次，但是整体上总是让我不那么满意，没人访问，而且之前使用的html 里面很多的js代码，看起来总感觉乱糟糟的。好了，不说那么多了，我们来看今天要实现的功能，在antd的组件中有Select这个组件： 这个Select选择器，那么我用到了这样的一个选择器，我把选择作为.
ant中select回显value问题
weixin_47102346的博客
08-11 1878
react项目中使用ant的select选择器遇到的问题，选中某一项后，想要的效果是显示选中项的label，但回填到选择框却为为value值。
react mui select 选项值属性
04-28
React MUI Select 组件的选项值属性是 value。可以使用该属性设置或获取 Select 组件的选中值。例如： ```jsx import React, { useState } from 'react'; import { Select, MenuItem } from '@material-ui/core'; function MySelect() { const [selectedValue, setSelectedValue] = useState(''); const handleSelectChange = (event) => { setSelectedValue(event.target.value); }; return ( <Select value={selectedValue} onChange={handleSelectChange}> <MenuItem value="option1">Option 1</MenuItem> <MenuItem value="option2">Option 2</MenuItem> <MenuItem value="option3">Option 3</MenuItem> </Select> ); } ``` 在上面的示例中，value 属性设置为 selectedValue 变量，通过 handleSelectChange 函数来更新 selectedValue 的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值