如何使用 Hooks 通过单击 ReactJS 中的按钮来获取多个 ckEditor？

Question

这是我的代码：

import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Followups = () => {
  const [clicked, setClicked] = useState(false);
  const [text, setText] = useState("");
  console.log("START", clicked);

  const buttonClicked = () => {
    setClicked(!clicked);
    // setClicked(false);
  };

  //   const changeState = () => {
  //     setClicked(false);
  //     console.log("State set to false ");
  //   };

  return (
    <>
      {clicked && (
        <CKEditor
          editor={ClassicEditor}
          data={text}
          onChange={(event, editor) => {
            const data = editor.getData();
            setText(data);
        
          }}
          config={{
            toolbar: [
              "heading",
              "|",
              "bold",
              "italic",
              "blockQuote",
              "numberedList",
              "bulletedList",
              "|",
              "undo",
              "redo",
            ],
          }}
        />
      )}
      
      <button onClick={buttonClicked}>Follow-ups</button>
    </>
  );
};
export default Followups;

这一切正常，没有任何错误，但我没有得到想要的输出。每当我单击该按钮时，它都会显示另一个 ckEditor，但是当我第二次按下该按钮时，它会隐藏 ckEditor（切换）。但我希望每当我按下按钮时，它都会显示另一个 ckEditor。我需要帮助任何人帮助我

Answer 1

如果您希望在单击按钮时添加另一个 CKEditor 组件，您应该使用数组来维护正在使用的 CKEditor 组件的列表。单击按钮时，将组件的新实例推送到数组。 Returnarray.map((CKEditorComponent)=>return CKEditorComponent)

Answer 2

Followup.jsx 文件

    import React, { useState } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Followups = (props) => {
  const [text, setText] = useState("");
  console.log(text);
  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        data={text}
        onChange={(event, editor) => {
          const data = editor.getData();
          setText(data);
          
        }}
        config={{
          toolbar: [
            "heading",
            "|",
            "bold",
            "italic",
            "blockQuote",
            "numberedList",
            "bulletedList",
            "|",
            "undo",
            "redo",
          ],
        }}
      />

      
    </>
  );
};
export default Followups;

App.jsx

    import React, { useState } from "react";

const [clicked, setClicked] = useState([]);
const buttonClicked = (event) => {
    event.preventDefault();
    let newValue = true;
    setClicked((preValue) => [...preValue, newValue]);
   
  };

  return (
    <>
      {clicked.map((data, index) => {
        return <Followups  />;
      })}
      <button className="btn btn-outline-success" onClick={buttonClicked}>
        Follow-ups
      </button>
    </>
  );

如何使用 Hooks 通过单击 ReactJS 中的按钮来获取多个 ckEditor？

How can I get multiple ckEditor by click on a button in ReactJS using Hooks?

reactjs

react-hooks

ckeditor