React 自定义表单实现

最新推荐文章于 2024-06-06 15:18:26 发布
最新推荐文章于 2024-06-06 15:18:26 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： react 文章标签： javascript reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40628756/article/details/115439448
版权
本文介绍了如何在React项目中实现一个自定义表单功能，使用Ant Design组件库。用户可以选择需要的数据项添加到表单中，同时可以删除不需要的项。文章提供了核心代码实现，并给出了完整的代码仓库链接。
摘要由CSDN通过智能技术生成

引言

我在使用react写web前端，React UI组件库是使用Ant Design。我的项目有一个功能要求是：可以自定义表单的item(选择自己需要的数据进行录入，并且可以删除不想要的item)并提交。

效果

自定义表单：

如图的Custom Config表单，鼠标点击空白选择框，会自动弹出来所有的item选项，点击对应的item选项，可以添加到Custom Config中：
自定义表单
每个item旁边的有Θ选项，点击Θ，Custom Config会删除此item。完成自定义。
添加dropout、axis两个item在Custom Config中

实现

下面的实现只是思路以及核心代码，全部代码可移步Github。

  1. 导入需要的组件与包

    Form组件是表单控件，Button是按钮，Card是卡片（我将表单包在卡片里）。
    Select是进行选择（有些items的值是True/False）以及将所有数据进行选择来展示，Tooltip是文字提示气泡框，提醒用户输入值的类型

最低0.47元/天 解锁文章
scv5cs
关注
专栏目录
react实现表单组件
web前端开发
10-19 2546
1、首先，引入js必不可少              2、废话少说，直接贴代码（注：这里把单选框和复选框定义成了两个子组件，子组件会调用父组件的方法）     react表单事件                    var FormApp=React.createClass({             getInitialState:functi
react实现页面动态表单设计器（自定义推拽表单)-含完整代码讲解
ll_883963的博客
07-25 2826
左侧多个表单控件，可自由选择拖拽至中间中间对推拽后的空间进行值的输入和选择右侧。
react-reactvioform是一个react的快速轻量表单库能快速实现表单构建
08-15
react-vio-form 是一个react的快速轻量表单库，能快速实现表单构建。提供自定义表单格式、表单校验、表单信息反馈、表单信息隔离等功能。可采用组件声明或者API的形式来实现表单的功能
react+ant 自定义表单
aiee的博客
06-01 1223
import React, { useState, useEffect } from "react"; import { Row, Col, Input, Select, DatePicker, Button, Tooltip } from "antd"; import { Const } from "src/utils/const"; const { Option } = Select; const { RangePicker } = DatePicker; interface IF..
react + antd 自定义表单控件 TableSelect
最新发布
06-06 299
基于 Select 控件自定义 TableSelect 控件，实现点击控件弹出 Modal 窗口，Modal 中加载 Table 组件。选择记录可以单选和多选。返回 value: string|number;label: string}[]还未实现 Table 加载数据与后台的交互，有时间完善继续完善。onSelect 事件可以获取到操作的记录行。
React ant design 表单form自定义表单控件Demo
吃瓜群众的博客
06-01 2874
AutoComplete，ant design form表单
react-sortablejs 实现自定义表单设计
Charles_Tian的博客
11-09 7314
一、业务需求描述 1. 能够拖动表单组件（不限制样式）到指定区域后，渲染成指定的组件 2. 能支持自定义标签名和属性，以及默认值 3. 能实现可支持预览、可排序、可编辑等功能 4. 能通过JSON数据格式前后端相互传递 二、业务前期准备 1. 在网上搜索了蛮多素材，但都是基于VUE的成品（http://www.maoyl.top/Demo/elformdesigndemo/index.html），与实际基于react实现不太符合，虽然自定义表单设计可以自己实现，但需一定时间，所以更偏向于使用已有的素材
react+antd拖拽生成自定义表单.rar
06-08
在本文中，我们将深入探讨如何使用React和Ant Design库来创建一个基于拖拽的自定义表单生成器。Ant Design是流行的React UI组件库，它提供了丰富的预设样式和组件，便于快速构建用户界面。而React作为Facebook开发的...
React 自定义Form表单验证
深海微澜
06-27 7271
1、非空限制——required：true <Input maxLength={16} minLength={4} hasLimitHint disabled=false {...init('accountName', { rules: [{ requi...
react-ReactFormReact的一个简单并且强大的表单构建器
08-15
React Form - 是一个轻量级的框架和工具用于在React应用中构建强大的表单
React 创建自定义控件
08-11
一个简单的React使用示例，使用React创建自定义控件
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
react-基于react的自定义滚动条组件
08-14
在React中，我们可以创建可复用的组件，这些组件可以代表UI的任何部分，从简单的按钮到复杂的表单。 创建自定义滚动条组件，我们需要考虑以下几个核心知识点： 1. **CSS样式调整**：默认滚动条的样式是由浏览器...
React中使用react-sortablejs实现自定义表单设计器，实现拖拽，排序功能
white-hang的博客
09-13 3512
本文，主要讲解了如何使用react-sortablejs自定义实现一个表单设计器，文章中的代码涉及到拖拽和排序。
React Ant Design 中内置、自定义表单验证的火速上手
笔记、经验、日常分享
04-18 2662
如何在 React Ant Design 中结合自定义验证规则和内置验证规则,实现复杂的表单验证逻辑。该示例涵盖了表单创建、验证规则定义、表单提交等完整的使用场景。掌握在 React Ant Design 中进行表单验证的各种技巧。
【React、Ant Design5】自定义Table
m0_46234046的博客
10-28 481
return {});return {});return {});
React表单组件自定义-可控及不可控组件
weixin_30795127的博客
12-19 138
一、可控组件 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单详解</title> 6 </head> 7 <body> 8 ...
react中使用antd自定义form表单：
light的博客~~~
10-18 1227
react中自定义form表单的使用
react 自定义hook如何学习
05-10
学习React自定义hook需要掌握以下几个方面： 1. React基础知识：了解React的生命周期、状态管理、组件通信等基础知识。 2. Hook基础知识：了解React的Hook API，包括useState、useEffect、useContext等常用的Hook...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值