DraftJS React-Hook-Form - отправка редактора в качестве входных данных

Я работаю с response-hook-form, и я хочу передать текстовый редактор в качестве ввода. Я включил компонент RichText ниже, который является стандартной реализацией Draft-js, но когда я нажимаю кнопку «Отправить», я получаю draft: undefined вместо текста внутри редактора.

index.js import {useForm, Controller} из 'response-hook-form';

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

reactjs react-hooks react-hook-form draftjs
person Luke    schedule 27.07.2020    source источник
comment
Я думаю, что сложно воспроизвести вашу проблему, а затем помочь вам. Не могли бы вы создать демо, используя, например, codeandbox, и прикрепить ссылку на демо в свой вопрос?   -  person Alexey Korkoza    schedule 27.07.2020
comment
Конечно, @AlexeyKorkoza - это песочница: codeandbox.io/s/interesting-chatterjee-o5x41   -  person Luke    schedule 27.07.2020
comment
@AlexeyKorkoza только что снова отредактировал.   -  person Luke    schedule 27.07.2020

Ответы (2)


arrow_upward
1
arrow_downward

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

Я обновил документ, включив в него пример draft-js:

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

вы должны использовать render prop контроллера

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;
person Bill    schedule 28.07.2020
comment
Спасибо, Билл. Я обновил CodeSandBox, чтобы попытаться сопоставить это, но все еще получаю ошибку TypeError: Cannot read property 'isOnChange' of undefined. Вот CodeSandbox: codesandbox.io/s/amazing-kapitsa-2fwjd - person Luke; 28.07.2020
comment
Просто проверьте здесь, можете ли вы настроить значение, и измените его. В моем CodeSandbox они оба настраиваются, и мне трудно поместить их в формат, указанный выше. Спасибо! - person Luke; 01.08.2020

arrow_upward
0
arrow_downward

Просто добавив к ответу, опубликованному @Bill, я бы рекомендовал использовать onEditorStateChange в качестве опоры для компонента Editor вместо onChange. Вот почему вы получаете эту ошибку

TypeError: невозможно прочитать свойство isOnChange, равное undefined.

Вот обновленный код:

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;
person Manik    schedule 16.12.2020