React中使用TinyMCE编辑器时如何正确绑定状态更新指定属性

报错核心原因 #

• React 版 TinyMCE 的onEditorChange回调不返回原生DOM事件对象，不存在e.target属性：回调第一个参数直接是编辑器当前的HTML内容字符串，第二个参数为编辑器实例，按照原生input的事件逻辑取值必然返回undefined。
• 原有代码存在状态拆分冗余、状态更新展开语法位置错误、Editor组件value传入类型错误（传了整个state对象而非字符串内容）、自定义属性无效等问题，进一步导致值更新异常。

正确实现代码 #

import { useState, useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

function RichTextForm() {
  // 统一管理全表单状态，无需为富文本单独拆分state
  const [formData, setFormData] = useState({
    name: '',
    year: '',
    detail: '' // 对应富文本编辑字段
  });
  // 可选：缓存编辑器实例，用于兜底取值、调用编辑器方法
  const editorRef = useRef(null);

  // 普通输入框通用变更逻辑
  const handleCommonInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  // 富文本变更逻辑：入参直接为最新内容字符串
  const handleEditorContentChange = (newContent) => {
    setFormData(prev => ({
      ...prev,
      detail: newContent
    }));
  };

  // 表单提交逻辑
  const handleFormSubmit = (e) => {
    e.preventDefault();
    // 受控模式下直接读取统一state即可拿到所有字段最新值，包含富文本内容
    console.log('全表单提交数据：', formData);
    // 兜底取值方式（可选）：const realTimeContent = editorRef.current.getContent();
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <div>
        <span>名称：</span>
        <input
          name="name"
          value={formData.name}
          onChange={handleCommonInputChange}
        />
      </div>
      <div>
        <span>年份：</span>
        <input
          name="year"
          value={formData.year}
          onChange={handleCommonInputChange}
        />
      </div>
      <div>
        <span>详情：</span>
        <Editor
          onInit={(_, editor) => editorRef.current = editor}
          init={{
            height: 500,
            menubar: false,
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          }}
          // value必须传入字符串类型的对应字段值，禁止传入整个state对象
          value={formData.detail}
          onEditorChange={handleEditorContentChange}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default RichTextForm;

关键注意事项 #

• 无需给<Editor>组件传入textareaName这类自定义属性试图从事件对象中读取字段名，官方回调不会透传解析这类自定义属性，受控模式下直接在变更处理函数中指定更新对应state字段即可。
• <Editor>的value属性只接受字符串类型的内容，传入对象会导致编辑器渲染、内容同步异常。
• 表单提交时无需手动查找DOM下的textarea节点取值，受控模式下统一state中的detail字段就是最新内容；如果需要做二次校验，可通过缓存的editorRef调用getContent()方法获取实时内容。

内容的提问来源于stack exchange，提问作者Ghazi