前端开发中，嵌入富文本编辑器时，可以通过富文本编辑器自身的事件处理函数将数据传输给后端。有时候，场景稍微复杂点，比如一个输入页面除了要保存富文本编辑器的内容到后端，可能还有一些其他输入组件获取到的数据也一并需要传输给后端。此时，可以尝试使用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.title
let content = values.context.blocks[0].text
console.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保存以进行后续处理。
效果：
