ReactJS-CKEditor onchange提升状态

如何解决ReactJS-CKEditor onchange提升状态

我设法设置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>
    )
}

解决方法

方法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 });
  }}
/>

方法2：父级访问编辑器实例

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，因为它会限制状态更改和重新渲染的次数。