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

Question

我正在学习如何使用React Final Form(简称RFF(

我已经学会了如何使用<Field>组件，但现在我需要添加一个自定义组件来使用RFF没有提供的所见即所得编辑器。

所以，我选择了反作用的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 />返回正确的值，没有问题，但我不知道如何通过使用name='editor_content'和单击表单submit按钮将该组件集成到RFF流。

非常感谢您的帮助。

Joe

Answer 1

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

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

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

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

请注意：不要尝试以这种方式传递组件component={<WYSIWYGEditor />}，否则它会返回一个关于不允许传递Object的错误不要忘记导入组件：(

上面的示例将把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

这非常有帮助。如果不是这样的话，它会更有帮助……你会放进你的代码的完整版本或接近它。我最终得到了这个：

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;