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

效果：