如何解决CKEditor 更新 React 状态
我在 React 中使用 ckeditor5。
代码的简化版:
function QuestionComponent() {
const [questions,setQuestions] = useState([{ question: null,choices: [] }]);
const [index,setIndex] = useState(0);
function prevIoUs(e) {
e.preventDefault();
setIndex(index - 1);
}
function next(e) {
e.preventDefault();
// Adding new empty question
if (questions.length <= index + 1) {
setQuestions([...questions,{ question: null,choices: [] }]);
}
setIndex(index + 1);
}
function handleQuestionInput(value) {
setQuestions(
questions.map((el,i) => {
if (i === index) {
el.question = value;
}
return el;
})
);
}
function handleChoiceInput(value,choiceIndex) {
setQuestions(
questions.map((el,i) => {
if (i === index) {
el.choices[choiceIndex].text = value;
}
return el;
})
);
}
return (
<>
<CKEditor
editor={Editor}
config={EditorConfig}
data={questions[index].question || ""}
onChange={(event,editor) => {
const data = editor?.getData();
handleQuestionInput(data);}}
/>
<div className="choices-Box">
{questions[index].choices.map((el,i) => (
<CKEditor
editor={Editor}
config={EditorConfig}
data={el.text || ""}
onChange={(event,editor) => {
const data = editor?.getData();
handleChoiceInput(data,i);
}}
/>))
}
</div>
<button
type="submit"
label="PrevIoUs"
onClick={prevIoUs}
/>
<button
type="submit"
label="Next"
onClick={next}
/>
}
问题:每当点击下一个或上一个时当前问题 (questions[index].question)值被清除并设置为 ""(或来自 data={questions[index].question || ""} 的默认值)。但是,选择会保持它们的状态并且运行良好。
我测试了如果我使用简单的输入
更改CKEditor,此代码运行良好我也想知道为什么它适用于选择,而不适用于问题
提前致谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。