reactjs - 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 >
)
}
编辑器.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>
)
}
解决方案
方法一:父控件文本
我们可以通过从父级传递值并使用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
组件有一个称为 prop 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,因为它限制了状态更改和重新渲染的数量。
推荐阅读
- python - Tkinter 我只能看到背景
- flutter - Flutter:如何在构建功能之前确保功能的完成
- python - 由于已安装的软件包,如何解决环境中的 python 版本冲突?
- php - 进行多重身份验证(管理员+老板)时如何使用刀片指令?
- javascript - (ReactJs) 如何从 firebase 身份验证用户读取用户数据?
- vba - excel vba比较行中的新旧数据
- python - 在字典中查找键与在列表中查找项所用的时间相同
- c - 有人可以解释为什么我的 luhn 算法失败了吗?
- excel - 使用 VBA 更改单元格时如何在 Excel 中突出显示整行
- java - 如何在使用 @Async 的方法中实现回调(Springboot 应用程序)