如何将 react-draft-wysiwyg 自定义组件与 React-Final-Form 集成

Question

我正在尝试学习如何使用 React-Final-Form（简称 RFF）。

我已经学会了如何使用 <Field> 组件，但现在我需要添加一个自定义组件以使用 RFF 未提供的 WYSIWYG 编辑器。

所以，我选择了 react-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 /> returns 正确的值，没有问题，但我不知道如何使用 name='editor_content' 将此组件集成到 RFF 流程中，当表单 submit 按钮被点击。

非常感谢任何帮助。

乔

Answer 1

好的，我通过查看 React-Final-Form 网站自己找到了解决方案。

为了在您的 RFF 表单中使用带有 <Field> 的自定义解决方案或第 3 方组件，您需要添加以下内容：

// RFF形式的主要组件文件

....

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

etc...

请注意：不要尝试以这种方式传递组件 component={<WYSIWYGEditor />} 否则它 returns 一个关于不允许传递对象的错误不要忘记导入组件:)

上面的例子将input和meta传递给自定义组件来收集数据并在表单中使用它，是这样的：

//所见即所得编辑器文件

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

etc....
  }

你会注意到，在 onEditorStateChange 函数中，我已经能够使用 props 中的 input，并且通过使用 onChange 方法，我可以传回返回的父组件的值（RFF 形式）。

我希望这会对其他人有所帮助。编码愉快！

Answer 2

这非常有帮助。如果不是 etc...，它会更有帮助......您会输入完整版本的代码或接近它。我最终得到了这个：

import * as React from 'react';
import { useState } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

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

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

export default WYSIWYGEditor;

如何将 react-draft-wysiwyg 自定义组件与 React-Final-Form 集成

How to integrate react-draft-wysiwyg custom component with React-Final-Form

reactjs

react-final-form

react-draft-wysiwyg