使用antd的<Form/>组件获取富文本编辑器输入的数据

前端开发中,嵌入富文本编辑器时,可以通过富文本编辑器自身的事件处理函数将数据传输给后端。有时候,场景稍微复杂点,比如一个输入页面除了要保存富文本编辑器的内容到后端,可能还有一些其他输入组件获取到的数据也一并需要传输给后端。此时,可以尝试使用antd里的<Form/>组件来包裹多个输入性组件,包括富文本编辑器组件,然后通过<Form/>onFinish事件来一次性处理其包裹的所有组件输入的数据。

在下面演示的例子中,输入界面包含一个<Input/>组件和一个富文本编辑器<Editor/>组件:
在这里插入图片描述
使用<Form/>组件来获取子组件的输入数据:

'use client'
import React, {useState, useRef} from 'react';
import {Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import TextArea from "antd/es/input/TextArea";
import {Input, Form, Typography, Space, Flex, Button, FormProps, Divider} from 'antd'const {Title, Text} = Typography;const MyEditor = ({hanldeSave, handleCancle}) => {type FieldType = {title?: string;context?: object;};const onFinish: FormProps<FieldType>['onFinish'] = (values) => {let title = values.titlelet content = values.context.blocks[0].textconsole.log('Success:', title, content);const resp = {title: title,context: content,}hanldeSave(resp)};return (<Form onFinish={onFinish}><Form.Item<FieldType>name={'title'}label={'输入标题:'}><Input/></Form.Item><Form.Item<FieldType>name="context"label="输入内容:"><Editor/></Form.Item><Flex justify={"end"} gap={10}><Button onClick={handleCancle}>取消</Button><Button type={"primary"} htmlType={"submit"}>确定</Button></Flex></Form>);
};export default MyEditor;

注意上面的写法:

  • 定义了一个 type FieldType = { title?: string; context?: object; };类型
  • 使用两个<Form.Item/>分别包裹<Input/>组件和富文本编辑器组件<Editor/>,并且两个<Form.Item/>name字段值与前面定义的FieldType字段名称保持一致
  • 解析数据:在<Form/>组件的onFinish事件处理函数里可以通过values拿到其包裹的所有·<Form.Item/>包裹的组件输入的数据,其中<Editor/>组件的数据是一个object类型,因为前面命名为context,需要使用语句values.context.blocks[0].text才能拿到输入的文本数据。
  • hanldeSave, handleCancle是有父组件传递过来的两个事件处理回调函数,用于将<Form/>获取的数据传递给父组件的状态state保存以进行后续处理。

效果:

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/42071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac搭建anaconda环境并安装深度学习库

1. 下载anaconda安装包 根据自己的操作系统不同&#xff0c;选择不同的安装包Anaconda3-2024.06-1-MacOSX-x86_64.pkg&#xff0c;我用的还是旧的intel所以下载这个&#xff0c;https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/&#xff0c;如果mac用的是M1&#xff0…

GuLi商城-商品服务-API-品牌管理-云存储开通与使用

这里学习下阿里云对象存储 地址&#xff1a;对象存储 OSS_云存储服务_企业数据管理_存储-阿里云 登录支付宝账号&#xff0c;找到了我以前开通的阿里云对象存储 熟悉下API 文档中心 简介_对象存储(OSS)-阿里云帮助中心 我们将用这种方式上传阿里云OSS

SprongBoot3整合Knife4j实现在线接口文档

大家好&#xff0c;我是晓凡。 写在前面 在上一篇文章&#xff0c;我们详细介绍了SpringBoot3 怎么整合SpringDoc实现在线接口文档。但是&#xff0c;有不少小伙伴 都觉得接口界面太丑了。有没有什么更美观一点的UI界面呢&#xff1f; 当然是有的了&#xff0c;毕竟这是一个…

那些年,学过的屠龙术

朱泙漫学屠龙于支离益&#xff0c;单千金之家&#xff0c;三年技成而无所用其巧。 程序员的技能&#xff0c;比如&#xff1a; Windows平台编程&#xff0c;从入行业时至今&#xff0c;没有做过相关的业务&#xff0c;相关的知识只能当成谈资。 Windows平台下应用的crash问题&…

基于Android Studio电影购票系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 主要实为了方便用户随时随地进行电影购票。在配色方面选择了一些富有电影元素的颜色。主要能够实现的功能与流程为&#xff1a; 1.用户首先需要注册用户名填写密码。 2.用户可以用之前注册的用户名和密码进行登录。 3.登…

数据库——数据库性能优化

title: 数据库——数据库性能优化 date: 2024-07-06 12:26:21 tags: 数据库 categories: 数据库 cover: /image/T1.jpg description: 数据库——MySQL的性能优化 数据库优化 系统的吞吐量瓶颈往往出现在数据库的 访问速度 上&#xff0c;随着应用程序的运行&#xff0c;数据库…

【密码学】密码学体系

密码学体系是信息安全领域的基石&#xff0c;它主要分为两大类&#xff1a;对称密码体制和非对称密码体制。 一、对称密码体制&#xff08;Symmetric Cryptography&#xff09; 在对称密码体制中&#xff0c;加密和解密使用相同的密钥。这意味着发送方和接收方都必须事先拥有这…

kubeadm离线部署kubernetesv1.30.0

背景&#xff1a;最近由于docker image获取镜像受限的问题&#xff0c;以及公司内部部署kubernetes受限于内部网络无法访问公网的问题&#xff0c;对于离线部署kubernetes成为不是十分方便。谨以此文仅供参考。 kubernetes部署节点信息 kubernetes版本 1.30.0 操作系统版本&a…

springboot2.7.6 集成swagger

在 Spring Boot 2.7.6 版本中集成 Swagger 的步骤相对直接&#xff0c;主要涉及添加依赖、编写配置以及在控制器中添加文档注解几个环节。 下面是集成 Swagger 的基本步骤&#xff1a; 1. 添加依赖 首先&#xff0c;在pom.xml文件中添加 Swagger 相关依赖。 对于 Spring Boot…

1-3 NLP为什么这么难做

1-3 NLP为什么这么难做 主目录点这里 字词结构的复杂性 中文以汉字为基础单位&#xff0c;一个词通常由一个或多个汉字组成&#xff0c;而不像英语词汇单元由字母构成。这使得中文分词&#xff08;切分句子为词语&#xff09;成为一个具有挑战性的任务。语言歧义性 中文中常…

提升机硬件设备的技术规格文档

提升机硬件设备技术规格文档 1. 产品概述 本技术规格文档旨在详细描述[公司名称]生产的[型号]型提升机的硬件设备技术参数、性能指标、安全特性及安装维护要求。该提升机设计用于[具体应用场景&#xff0c;如高层建筑、仓库货物搬运、家用等]&#xff0c;旨在提供高效、安全、…

网络安全设备——蜜罐

网络安全设备蜜罐&#xff08;Honeypot&#xff09;是一种主动防御技术&#xff0c;它通过模拟真实网络环境中的易受攻击的目标&#xff0c;以吸引和监测攻击者的活动。具体来说&#xff0c;蜜罐是一种虚拟或实体的计算机系统&#xff0c;它模拟了一个真实的网络系统或应用程序…

AcWing 3207:门禁系统 ← 桶排序中“桶”的思想

【题目来源】https://www.acwing.com/problem/content/3210/【题目描述】 涛涛最近要负责图书馆的管理工作&#xff0c;需要记录下每天读者的到访情况。 每位读者有一个唯一编号&#xff0c;每条记录用读者的编号来表示。 给出读者的来访记录&#xff0c;请问每一条记录中的读者…

C语言的结构体写法

C语言中的结构体是一种用户自定义的数据类型&#xff0c;它可以同时存储多个不同类型的数据。结构体由多个成员变量组成&#xff0c;每个成员变量可以有不同的数据类型。 结构体的定义形式为&#xff1a; struct 结构体名 {数据类型 成员变量1;数据类型 成员变量2;// 其他成员…

Shell编程类-网站检测

Shell编程类-网站检测 面试题参考答法 a(1 2 3 4) echo ${a[0]} echo ${a[*]}这里声明一个数值&#xff0c;并选择逐个调用输出还是全部输出 curl -w %{http_code} urL/IPADDR常用-w选项去判断网站的状态&#xff0c;因为不加选择访问到的网站可能出现乱码无法判断是否网站down…

Xilinx FPGA:vivado关于fifo的一些零碎知识

一、FIFO概念 先进先出&#xff0c;是一种组织和操作数据结构的方法。在硬件应用中&#xff0c;FIFO一般由一些读写指针&#xff0c;存储和控制的逻辑组成。 二、xilinx中生成的FIFO的存储类型 &#xff08;1&#xff09;shift register FIFO : 移位寄存器FIFO&#xff0c;这…

【基础篇】1.8 C语言基础(二)更新中

三,位操作 在STM32开发中,位操作是非常重要的技术,特别是在处理器外设寄存器的配置和控制过程中。它可以有效地提高代码的性能、可维护性和可移植性。 3.1 位操作运算符 3.1.1 按位与(&) 运算规则:如果两个操作数的对应位都为 1,则结果为 1;否则为 0。示例:a &…

自动化设备上位机设计 三

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 using SqlSugar;namespace 自动化上位机设计 {public partial class Form1 : Form{SqlHelper sqlHelper new SqlHelper();SqlSugarClient dbContent null;bool IsRun false;int Count 0;public Form1(){Initializ…

笔记:TypeDescriptor和反射

TypeDescriptor 和反射都是 .NET 中用于访问类型信息的机制&#xff0c;但它们在设计目的、使用场景和功能上有所不同。 反射 反射是 .NET 提供的一种机制&#xff0c;允许在运行时检查程序集、模块和类型的元数据。你可以使用反射动态地创建类型的实例、调用方法、访问字段和属…

【论文笔记】BEVCar: Camera-Radar Fusion for BEV Map and Object Segmentation

原文链接&#xff1a;https://arxiv.org/abs/2403.11761 0. 概述 本文的BEVCar模型是基于环视图像和雷达融合的BEV目标检测和地图分割模型&#xff0c;如图所示。模型的图像分支利用可变形注意力&#xff0c;将图像特征提升到BEV空间中&#xff0c;其中雷达数据用于初始化查询…