如何在 react-hook-form 中使用 draft-js-plugins

Question

我正在使用 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;

一切正常，我看到插件了。但是当我想要 select 字并单击插件 (I, B, U) 按钮时显示错误

props.getEditorState is not a function

不懂怎么解决？我找到了一些示例 https://www.draft-js-plugins.com/plugin/static-toolbar。但没有帮助

codesandbox

上的实例

Answer 1

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

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

如何在 react-hook-form 中使用 draft-js-plugins

How to use draft-js-plugins in react-hook-form

draft-js-plugins

react-hook-form