react动态表单

最新推荐文章于 2024-04-23 22:33:39 发布
最新推荐文章于 2024-04-23 22:33:39 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： react 文章标签： react.js react动态表单 react动态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35905501/article/details/120546664
版权

react动态表单

1.小要求

在工作中，我们也会碰到这样子的需求：在填写信息的时候，可以填写多个人名、多个需求、以及动态生产一个分组。
今天我们就以: 可以动态的添加/删除人名、路径以及可以添加/删除一个分组的需求来开始今天的学习之旅。需求如下图所示:
在这里插入图片描述

2.技术点分析

1.数据结构
2.react+antd 动态编辑表格数据提及的知识点
3.js操作数据的方法: 添加数据、根据下标删除数据

3.代码分析

3.1 数据结构分析

/**
*	1. 最外面是一个数组
*	2. 中间是一个字典，每个字典就是一个分组
*	3. name表示人名，也是一个数组，这样子我们就可以动态的添加/删除人名(path路径，跟name同理)
**/
const [data, setData] = useState([
        {
            'name': [''],
            'path': ['']
        }
 ])

3.2添加人名分析

添加路径和添加人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“添加人名”举例子:

 <Button type="dashed" width={200} onClick={() => {
 		// 采用了[...xxx]性质，在对应分组中名字数据中添加一个空的数据
       let obj = [...data]
       setData([])
       obj[index]['name'].push('')
       // 然后在更新数据
       setData(obj);
   }}>+添加人名</Button>

3.3修改人名分析

修改路径和修改人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“修改人名”举例子:

<Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => {
	  // 采用了[...xxx]性质，
      let obj = [...data]
      setData([])
      // 修改对应的人名
      obj[index]['name'][nameIndex] = e.target.value
      // 然后在更新数据
      setData(obj)
  }} />

3.4删除人名分析

删除路径和删除人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“删除人名”举例子:

<MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => {
	// 采用了[...xxx]性质，
    let obj = [...data]
    setData([])
    // 删除人名，使用js的数组用法: 根据下标删除
    obj[index]['name'].splice(nameIndex, 1);
    setData(obj)
}} />

3.5添加分组

 <Button type="dashed" style={{width:'400px',}} onClick={()=>{
 	  // 采用了[...xxx]性质，
      let obj = [...data]
      setData([])
      // 在原来的数组中，在添加一个对象
      obj.push({
          'name':[''],
          'path':['']
      })
      setData(obj);
   }}>+分组</Button>

3.6删除分组

<MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => {
    let flag = 0
     // 判断名字/路径的输入框中是否有值
     data[index]['name'].map(item=>{
         if(item != ''){
             flag = 1
         }
     })
     if(flag == 0){
         data[index]['path'].map(item=>{
             if(item != ''){
                 flag = 1
             }
         })
     }
	 // 如果有值的话，则出现一个弹框提示用户这里还是有值的，是否要删除
     if(flag){
         confirm({
             title: '已经编辑了部分数据，确认要删除',
             icon: <ExclamationCircleOutlined />,
             centered:'true',
             okText:'确认',
             cancelText:'取消',
             onOk() {
                 let obj = [...data]
                 setData([])
                 obj.splice(index, 1);
                 setData(obj)
             },
             onCancel() {},
         });
     }else{
         let obj = [...data]
         setData([])
         obj.splice(index, 1);
         setData(obj)
     }
    
 }} />

4.完整代码

import React, { useState } from 'react';
import { Input, Row, Col, Button, Divider, Modal } from 'antd'
import { MinusCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
function Index() {

    const [data, setData] = useState([
        {
            'name': [''],
            'path': ['']
        }
    ])

    return (
        <div style={{ marginLeft: 50, marginTop: 100 }}>
            <div>
                {
                    data.map((item, index) => {
                        return <div>
                            <div style={{display:'flex'}}>
                                <span>第{index + 1}组</span>
                                <MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => {
                                    let flag = 0
                                    console.log(data[index]['name']);
                                    data[index]['name'].map(item=>{
                                        if(item != ''){
                                            flag = 1
                                            return false
                                        }
                                    })
                                    if(flag == 0){
                                        data[index]['path'].map(item=>{
                                            if(item != ''){
                                                flag = 1
                                                return false
                                            }
                                        })
                                    }

                                    if(flag){
                                        confirm({
                                            title: '已经编辑了部分数据，确认要删除',
                                            icon: <ExclamationCircleOutlined />,
                                            centered:'true',
                                            okText:'确认',
                                            cancelText:'取消',
                                            onOk() {
                                                let obj = [...data]
                                                setData([])
                                                obj.splice(index, 1);
                                                setData(obj)
                                            },
                                            onCancel() {},
                                        });
                                    }else{
                                        let obj = [...data]
                                        setData([])
                                        obj.splice(index, 1);
                                        setData(obj)
                                    }
                                   
                                }} />
                            </div>
                            <Divider />
                            <Row>
                                {
                                    item.name.map((nameItem, nameIndex) => {
                                        return <Col span={8}>
                                            <div style={{ display: 'flex', marginTop: 10 }}>
                                                <span >{'姓名' + (nameIndex + 1) + ':'}</span>
                                                <Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => {
                                                    let obj = [...data]
                                                    setData([])
                                                    obj[index]['name'][nameIndex] = e.target.value
                                                    setData(obj)
                                                }} />
                                                <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => {
                                                    let obj = [...data]
                                                    setData([])
                                                    obj[index]['name'].splice(nameIndex, 1);
                                                    setData(obj)
                                                }} />
                                            </div>
                                        </Col>
                                    })
                                }
                            </Row>
                            <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}>
                                <Button type="dashed" width={200} onClick={() => {
                                    let obj = [...data]
                                    setData([])
                                    obj[index]['name'].push('')
                                    setData(obj);
                                }}>+添加人名</Button>
                            </div>
                            <Row>
                                {
                                    item.path.map((pathItem, pathIndex) => {
                                        return <Col span={8}>
                                            <div style={{ display: 'flex', marginTop: 10 }}>
                                                <span >{'路径' + (pathIndex + 1) + ':'}</span>
                                                <Input style={{ width: 200, marginLeft: 10 }} value={pathItem} onChange={(e) => {
                                                    let obj = [...data]
                                                    setData([])
                                                    obj[index]['path'][pathIndex] = e.target.value
                                                    setData(obj)
                                                }} />
                                                <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.path.length == 1 ? 'none' : '' }} onClick={() => {
                                                    let obj = [...data]
                                                    setData([])
                                                    obj[index]['path'].splice(pathIndex, 1);
                                                    setData(obj)
                                                }} />
                                            </div>
                                        </Col>
                                    })
                                }
                            </Row>
                            <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}>
                                <Button type="dashed" width={200} onClick={() => {
                                    let obj = [...data]
                                    setData([])
                                    obj[index]['path'].push('')
                                    setData(obj);
                                }}>+添加路径</Button>
                            </div>

                        </div>
                    })
                }
            </div>
            <div style={{display:'flex', width:'100vw', justifyContent:'center', marginTop:10, marginBottom:10}}>
                <Button type="dashed" style={{width:'400px',}} onClick={()=>{
                    let obj = [...data]
                    setData([])
                    obj.push({
                        'name':[''],
                        'path':['']
                    })
                    setData(obj);
                }}>+分组</Button>
            </div>
        </div>
    )

}


export default Index

总结

好了，今天就分享到这里，希望大家在学习了一篇博文之后，可以封装出自己的组件来应对多种多样的需求。

追逐蓦然
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现
Constantiny的博客
07-02 3488
目前想到是用浏览器本地存储存下每次的 storeId 值，仅在有值的才写进去，每次读取 storeId 时候先判断 props 传过来的是否是空值，是空值就从 storage 里面取。问题一：复制的时候由于存在表单联动，直接获取 form 对应字段的值虽然能附上值但是复制出来的下拉框没值 ，因为 useMemo 发生变化。复制时传给子组件的 id 为 先为有效值后不存在，所以缓存的下拉框选项值变为空。有一个页面的组件，其中一部分需要用到。综合以上需求，大致的页面样子。
基于React动态配置表单
06-08
基于React动态配置表单，方便学习
在react antd中动态生成多个 form表单组，包括一个动态添加/删除表单项的功能和一个提交表单的功能
weixin_38791717的博客
04-12 3960
方法，动态添加一个新的表单项。当用户提交表单时，将会调用。属性来指定占位文本。在每个表单项的最后，我们使用。组件来实现删除表单项的功能。在表单的最后，我们使用。方法，打印所有表单项的内容。在输入框中，我们使用。组件来实现提交表单的功能。方法循环渲染每个表单项，并使用。组件来动态生成多个表单项。属性指定表单项的名称，使用。在这个示例中，我们首先使用。组件包裹每个表单项。
react和antd3 实现动态表单
weixin_50962392的博客
02-15 905
import React, { Component } from 'react'; import { Spin, Form, Row, Col, Card,Icon } from 'antd'; import { OcirfButton,OcirfInput } from '@/components'; import { handleNewFilter, getStringLength } from '@/utils/utils'; import styles from './index.less'; im
react 动态表单ant-customize-form复杂控制
weixin_41644392的博客
06-29 199
复杂动态表单的控制配置化
ZooTeam 拍了拍你，来看看如何设计动态化表单
weixin_48726650的博客
06-29 415
前言 对于 ToB 业务而言，随着业务的不断壮大，接入的客户逐渐增加，相同页面的差异化的需求越来越多，尤其是在表单层面，小到多一个字段少一个字段这种简单的需求，大到整个页面不变的只剩下一些基础字段。 一旦这种差异化需求随着业务量的增长而膨胀起来。代码中的 IF ELSE 越来越多，项目就越来越难以维护。基于这个问题，比较普遍的解决方案要么是项目拆分，要么相同项目的代码分割。 这两种方案都有维护成本比较大的弊端，那么有没有更好点的解决方案呢。本文就带你了解一下动态化表单搭建。 什么是动态表单 先下个定义，动态
用react实现页面动态表单设计器
wh_xia_jun的专栏
10-09 1869
react页面动态布局设计器的实现
react+antd实现表格封装，可动态控制列显示隐藏。
ll_883963的博客
06-19 1200
{
React 最佳实践：动态表单（ant-customize-form）
weixin_41644392的博客
06-16 713
react动态表单组件ant-customize-form
react-dynamic-forms:React的动态表单库
05-08
React动态表格 注意：v1.0增加了对React 16.x的支持，但是由于Mixins在React 15中的工作方式，这是相当可观的重写，以提供完全不使用Mixins的API。 该存储库包含一组基于React的表单组件，这些组件在ESnet中用于我们的网络数据库应用程序（ESDB），但可由需要构建复杂表单的任何基于React的项目使用。 我们的方法是将表单视为受控输入，本质上是具有很多输入的输入（可能有很多输入，依此类推...）。您可以根据需要保持表单的状态，然后将该状态向下传递给表单其valueStruts。 如果编辑了表单，则将调用回调，您可以更新表单状态。 当需要保存表单时，这取决于您，您始终拥有表单的状态。 在此之上，表单具有定义规则的架构。 因此，您还可以收听缺失值或错误计数的变化。 利用此信息，很容易控制用户是否也可以提交表单。 该库基于Immutable.js构建
react-ReactFormReact的一个简单并且强大的表单构建器
08-15
React Form - 是一个轻量级的框架和工具用于在React应用中构建强大的表单
react-plexusform采用JSONSchema的react动态表单组件
08-15
plexus-form - 采用JSON-Schema的react动态表单组件
Folio使用React和CSSGrid布局构建的动态表单
08-10
Folio - 使用React和CSS Grid布局构建的动态表单
dynamicform-react-client:动态表单渲染使用React + Redux
05-17
动态表单 用于读取表单定义，然后渲染组件 安装 npm install dynamicform-react-client --save; 用法 创建 store.js import { applyMiddleware, createStore, combineReducers} from 'redux'; import thunk from '...
React 表单与事件
01-21
React 表单与事件 本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。 在 HTML 当中，像 , , 和 这类表单元素会维持自身状态，并...
React基础知识大汇总
qq_36828822的博客
04-21 926
如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
React vs React Native写法上的不同
Ranye的博客
04-23 530
从标签和样式两个角度，快速从react过渡到react native
react引入iconfont的svg图标
最新发布
qq_23858785的博客
04-23 296
react引入iconfont的svg图标
react 封装动态表单
06-02
React 可以通过封装组件的方式来实现动态表单。以下是一个简单的例子： 1. 创建一个表单组件，接收一个数组作为参数，数组中包含表单项的配置信息，例如： ``` const formItems = [ { label: 'Username', name: 'username', type: 'text', required: true }, { label: 'Password', name: 'password', type: 'password', required: true }, { label: 'Email', name: 'email', type: 'email', required: false }, // ... ]; ``` 2. 在表单组件中，使用 map 方法遍历表单项配置数组，根据每个配置项的信息生成对应的表单控件。 ``` function DynamicForm({ formItems }) { const [formValues, setFormValues] = useState({}); function handleChange(e) { setFormValues({ ...formValues, [e.target.name]: e.target.value }); } function handleSubmit(e) { e.preventDefault(); // 处理表单提交逻辑 } return ( <form onSubmit={handleSubmit}> {formItems.map(item => ( <div key={item.name}> <label>{item.label}</label> <input type={item.type} name={item.name} value={formValues[item.name] || ''} required={item.required} onChange={handleChange} /> </div> ))} <button type="submit">Submit</button> </form> ); } ``` 3. 在父组件中调用动态表单组件，并传入表单项配置数组作为参数。 ``` function App() { const formItems = [ // 表单项配置信息 ]; return ( <div className="App"> <DynamicForm formItems={formItems} /> </div> ); } ``` 以上就是一个简单的动态表单封装示例，可以根据需求调整表单项配置信息和表单控件的样式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值