如何将React Hook Form的register属性传入TipTap编辑器组件

1. 父组件传递Register属性 #

先通过register方法获取表单字段的绑定配置，直接解构传递给TipTap组件即可：

<div className='mb-4'>
  <label htmlFor='desc'>Description</label>
  {/* 先获取desc字段的register绑定配置 */}
  {const descRegister = register('desc', {
    required: 'Please enter description',
  })}
  {/* 将register属性传递给TipTap组件 */}
  <TipTap {...descRegister} />
  {/* 保留原错误提示逻辑 */}
  {errors.desc && (
    <div className='text-red-500'>{errors.desc.message}</div>
  )}
</div>

2. 修改TipTap组件接收并使用属性 #

在TipTap组件中接收onChange、onBlur、value等核心属性，实现编辑器与表单字段的同步：

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { MenuBar } from './MenuBar';
import { useEffect } from 'react';

const TipTap = ({ onChange, onBlur, value = '' }) => {
  const tipTapEditor = useEditor({
    extensions: [StarterKit],
    content: value, // 用表单初始值初始化编辑器内容
    onUpdate: ({ editor }) => {
      const html = editor.getHTML();
      // 将编辑器内容同步到React Hook Form字段
      onChange(html);
    },
  });

  // 监听表单值变化，同步更新编辑器（比如表单重置场景）
  useEffect(() => {
    if (tipTapEditor && value !== tipTapEditor.getHTML()) {
      tipTapEditor.commands.setContent(value);
    }
  }, [tipTapEditor, value]);

  return (
    <div>
      <MenuBar editor={tipTapEditor} />
      {/* 绑定失焦事件，触发表单校验 */}
      <EditorContent 
        editor={tipTapEditor} 
        onBlur={() => onBlur()} 
      />
    </div>
  );
};

export default TipTap;

核心逻辑说明 #

• 值同步：通过编辑器的onUpdate钩子，将编辑器生成的HTML内容传递给React Hook Form的onChange方法，实现字段值同步。
• 校验触发：给EditorContent绑定onBlur事件，触发React Hook Form的字段校验逻辑，确保必填规则生效。
• 初始值与重置：通过useEffect监听表单value变化，同步更新编辑器内容，适配表单初始化或重置场景。

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