使用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保存以进行后续处理。

效果：