DraftJS React-Hook-Form -提交编辑器作为输入

Question

我正在使用react-hook-form，我想要传递一个富文本编辑器作为输入。我在下面包含了草稿组件，它是一个标准的RichText -js实现，但是当我单击submit时，我得到的是"draft: undefined“而不是编辑器中的文本

index.js从‘react-hook-form’导入{ useForm，控制器}；

const JobPostForm = () => {

    const { register, handleSubmit, errors, control } = useForm({
    });

    return(
        <Controller
            as={<RichText />}
            name="draft"
            control={control}
        />
    )
}

RichText.js

<Editor
      customStyleMap={styleMap}
      ref={editor}
      editorState={editorState}
      onChange={editorState => setEditorState(editorState)}
 />

Answer 1

https://react-hook-form.com/api#Controller

我已经更新了文档，以包含draft-js示例：

https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js

你应该使用控制器的render属性

import React from "react";
import { Controller } from "react-hook-form";
import { Editor } from "draft-js";

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

export default RichText;

Answer 2

除了@Bill发布的答案之外，我建议使用onEditorStateChange而不是onChange作为Editor组件的支持。这就是您收到此错误的原因

TypeError:无法读取未定义的属性'isOnChange‘。

以下是更新后的代码：

import React from "react";
import { Controller } from "react-hook-form";
import { Editor } from "draft-js";

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

export default RichText;