Как интегрировать пользовательский компонент Reaction-draft-wysiwyg с React-Final-Form

Question

Я пытаюсь научиться использовать React-Final-Form (коротко RFF).

Я научился использовать компонент <Field>, но теперь мне нужно добавить пользовательский компонент в используйте редактор WYSIWYG, который не предоставляется RFF.

Итак, я выбрал реагировать-draft-wysiwyg.

Хорошо, сначала вот моя форма:

const FormComponent = () => {

  const handleSubmitOnClick = () => ({
    news_title,
    news_subtitle,
    editor_content, 
    image_url,
  }) => {

    const data = {
      "user": {
        news_title: news_title,
        news_subtitle: news_subtitle,
        editor_content: editor_content <- here the content from the WYSIWYG editor
        image_url: image_url 
      }
    }

     // API call here .... 
  }

  return (
    <>
      <h1>News Main Page</h1>

      <Form 
        onSubmit={handleSubmitOnClick()}
      >
        {
          ({ 
            handleSubmit, 
            values, 
            submitting,
          }) => (
          <form onSubmit={handleSubmit} data-testid="form">
            <Field 
              name='news_title'
              placeholder='News Title'
              validate={required}
            >
              {({ input, meta, placeholder }) => (
                <div className={meta.active ? 'active' : ''}>

                  <input {...input} 
                    type='text' 
                    placeholder={placeholder} 

                  />
                </div>
              )}
            </Field>

            <Field 
              name='news_subtitle'
              placeholder='News SubTitle'
              validate={required}
            >
              {({ input, meta, placeholder }) => (
                <div className={meta.active ? 'active' : ''}>

                  <input {...input} 
                    type='text' 
                    placeholder={placeholder} 
                  />
                </div>
              )}
            </Field>


            <WYSIWYGEditor /> **** HERE THE ISSUE ****

            <MyDropzone />
            <button 
              type="submit"
              className="signup-button"
              disabled={submitting}
            >
              Continue
            </button>

          </form>
        )}
      </Form>
    </>
  )
}

export default FormComponent;

Это файл редактора:

import React, { useState } from 'react';

// Components
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';


// Hooks version of the Class below (done by me)
const WYSIWYGEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const onEditorStateChange = editorState => {
    return setEditorState(editorState)
  } 

  return (
    <div className="editor">
      <Editor 
        editorState={editorState} 
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
      />
      {
        console.log('editorState => ', draftToHtml(convertToRaw(editorState.getCurrentContent())))
      }
    </div>
  )
}

export default WYSIWYGEditor

<WYSIWYGEditor /> возвращает правильное значение, проблем нет, но я не знаю, как интегрировать этот компонент в поток RFF с помощью name='editor_content' и когда нажата кнопка формы submit.

Любая помощь приветствуется.

Джо

Answer 1

ОК, я сам нашел решение, заглянув на веб-сайт React-Final-Form.

Чтобы использовать пользовательское решение ИЛИ сторонние компоненты с <Field> внутри формы RFF, необходимо добавить следующее:

// файл основного компонента с формой RFF

....

<Field
  name="editor_content"
  component={WYSIWYGEditor}
/>

etc...

Обратите внимание: не пытайтесь передать компонент таким образом component={<WYSIWYGEditor />}, иначе он возвращает ошибку о недопустимом передать объект НЕ забывайте импортировать компонент:)

В приведенном выше примере input и meta будут переданы пользовательскому компоненту для сбора данных и использования их в форме, и вот как:

// WYSIWYGEditor file

const WYSIWYGEditor = ({ input, meta }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const onEditorStateChange = editorState => {
    setEditorState(editorState)
    return input.onChange(draftToHtml(convertToRaw(editorState.getCurrentContent())))

etc....
  } 

Вы заметите, что в функции onEditorStateChange я смог использовать input из реквизита и с помощью onChange метод Я могу вернуть возвращенное значение в родительский компонент (форма RFF).

Надеюсь, это поможет кому-то еще. Удачного кодирования!