如何在 react-hook-form 中使用 Draft-js-plugins答案

【问题标题】：How to use draft-js-plugins in react-hook-form如何在 react-hook-form 中使用 Draft-js-plugins
【发布时间】：2021-11-10 07:41:43
【问题描述】：

我使用 react-hook-form 和 draft.js 作为所见即所得。我使用 Draft-js-plugins 的代码：

import React, {useRef} from "react";
import { Controller } from "./src";
import Editor from "@draft-js-plugins/editor";
import createToolbarPlugin from "@draft-js-plugins/static-toolbar";
import "draft-js/dist/Draft.css";
import "@draft-js-plugins/static-toolbar/lib/plugin.css";

const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const plugins = [staticToolbarPlugin];

function RichText({ control }) {
  const editor = useRef(null);
  return (
    <div
      style={{
        border: "1px solid #ccc",
        minHeight: 30,
        padding: 10
      }}
    >
      <Toolbar />
      <Controller
        ref={editor}
        name="DraftJS"
        control={control}
        plugins={plugins}
        render={({ value, onChange }) => {
          return <Editor editorState={value} onChange={onChange} />;
        }}
      />
    </div>
  );
}

export default RichText;

一切都好，我看到了插件。但是当我想选择单词并点击插件时（I、B、U）按钮显示错误

props.getEditorState is not a function

我不明白如何解决？我找到了一些例子https://www.draft-js-plugins.com/plugin/static-toolbar。但没有帮助

codesandbox 上的实时示例

【问题讨论】：

标签： react-hook-form draft-js-plugins

【解决方案1】：

我认为您必须将 <Toolbar /> 组件作为 <Editor /> 组件的兄弟组件并将 ref 传递给它。

<Controller
  name="DraftJS"
  control={control}
  render={({ value, onChange, ref }) => {
    return (
      <>
        <Toolbar />
        <Editor
          ref={ref}
          editorState={value}
          onChange={onChange}
          plugins={plugins}
        />
      </>
    );
  }}
/>

【讨论】：

感谢您的完美回答。