如何在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;

一切都好，我看到了插件。但是当我想要选择word并点击插件(I，B，U)按钮时，会显示错误

props.getEditorState is not a function

我不明白怎么解决这个问题？我发现了一些https://www.draft-js-plugins.com/plugin/static-toolbar .but没有帮助的例子

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}
        />
      </>
    );
  }}
/>

​

​