微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CKEditor 更新 React 状态

如何解决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 举报,一经查实,本站将立刻删除。