Reactjs - CKEditor onchange 提升状态答案

【问题标题】：Reactjs - CKEditor onchange lift up stateReactjs - CKEditor onchange 提升状态
【发布时间】：2020-10-26 06:40:41
【问题描述】：

我设法设置了 CKEditor，效果很好。我的问题是我正在重构代码，我需要编辑器组件被其他几个组件调用。

所以，我的 handleChange 不再起作用了。如何仅将数据传递给父级的 handleChange 函数？

父母：

function IncluirArtigo() {

    const campos = { autor: '', titulo: '', texto: '' };

    const [valores, setValores] = useState(campos);
    const [erro, setErro] = useState(false);
    const history = useHistory();

    const handleChange = e => {
        setValores({
            ...valores,
            [e.target.name]: e.target.value
        });
        console.log(valores)
    }

    const incluir = async (e) => {
        e.preventDefault();

        console.log(valores);
        
        try {
            //await PostArtigo(valores);
            /* Poderia redirecionar para o artigo criado, se o post retornasse uma id */
            goHome();
        }
        catch (e) {
            console.error('erro', e);
            setErro(true);
        }
    }

    const goHome = () => history.push('/');

    return (
        <div className="container">
            {
                erro ?
                    <div>Houve erro na inclusão do artigo, tente novamente</div>
                    :
                    <>
                        <h3>Inclusão de Artigos</h3>
                        <form onSubmit={incluir} className="form-incluir">
                            <label htmlFor="autor">Autor:</label>
                            <input 
                                type="text" 
                                name="autor" 
                                value={valores.autor}
                                onChange={handleChange}
                            />
                            <label htmlFor="titulo">Título:</label>
                            <input 
                                type="text" 
                                name="titulo" 
                                value={valores.titulo}
                                onChange={handleChange}    
                                />
                            <label>Conteúdo:</label>
                            <div className="editor">
                                <Editor />
                            </div>
                            <input className="btn-enviar" type="submit" value="Enviar" />
                        </form>
                    </>
            }
        </div >
    )
}

editor.js

function Editor() {

    return (
        <div className="editor">
            <CKEditor
                editor={ClassicEditor}
                data={valores.texto}
                onChange={(event, editor) => {
                    const texto = editor.getData();
                    console.log({ event, editor, texto });
                    handleChange() /* I need this function to pass only valores data */
                }}
            />
        </div>
    )
}

【问题讨论】：

您想让它成为一个受控组件，其中编辑器内容的值在父级中存储和更新。我将查看包文档，看看是否可以编辑您的代码。前几天我回复a similar question关于SunEditor。

标签： reactjs ckeditor ckeditor5

【解决方案1】：

方法一：父控件文本

我们可以通过从父级传递值并使用onChange 回调来更新父级中的值，将编辑器变成一个受控组件。

function Editor({ texto, onChangeTexto }) {
  return (
    <div className="editor">
      <CKEditor
        editor={ClassicEditor}
        data={texto}
        onChange={(event, editor) => {
          onChangeTexto(editor.getData());
        }}
      />
    </div>
  );
}

<Editor
  texto={valores.texto}
  onChangeTexto={(texto) => {
    setValores({ ...valores, texto });
  }}
/>

方法二：父访问编辑器实例

CKEditor 组件有一个名为onInit 的属性，我们可以使用它来将editor 对象的引用传递给父对象。父级可以从 editor.getData() 而不是从 valores.texto 获取文本的值，而不是在每次更改时更新状态。

function Editor({ onInit }) {
  return (
    <div className="editor">
      <CKEditor
        editor={ClassicEditor}
        onInit={onInit}
      />
    </div>
  );
}

在父母中：

const [editor, setEditor] = useState(null);

<Editor
  onInit={setEditor}
/>

获取文本（在提交功能中）

const texto = editor?.getData();

在这种特殊情况下，我可能会使用方法 2，因为它限制了状态更改和重新渲染的数量。

【讨论】：