0

我现在被困了一天。已阅读多个答案，但找不到任何东西。

我的任务很简单，我有一个用户可以回答问题的页面。

  • 该页面将打开两个编辑器（默认情况下）。（在react-quill GitHub 讨论中找到这个）。

  • 会有一个“添加步骤”按钮，当然，它会在下面添加另一个羽毛笔编辑器，用户可以添加任意数量的步骤。

  • 编辑器旁边会有一个“删除”按钮来删除编辑器，前两个编辑器除外。

现在，我也想将上述步骤单独存储在我的数据库中，但是onClick编辑器上没有e.target，相反，它只是给出了 HTML 值。因此，如何在 onClick 上添加编辑器并将值与多个编辑器分开？

任何有关解决方案的方向或提示将不胜感激。谢谢。

4

1 回答 1

2

您可以使用Array of Objects获得单独的值。

它可以通过两个独立的组件来完成，

  1. 一种用于富文本编辑器，
  2. 具有状态的主要组件（对象数组）

我在下面的代码中使用了react-quill库作为文本编辑器和react-bootstrap的样式。您可以选择替换其中一个或两个

创建两个组件：

 - App.js // Main component
 - ReactQuill.js // Editor component

ReactQuill.js

    import React from "react";
    import ReactQuill from "react-quill";
    
    import "react-quill/dist/quill.snow.css";
    
    class ReactQuillEditor extends React.Component {
      render() {
        const { response, handleChange } = this.props;
        return (
          <ReactQuill
            style={{ marginTop: "4px" }}
            value={response}
            onChange={handleChange}
          />
        );
      }
    }
    
    export default ReactQuillEditor;

应用程序.js

import { useState } from "react";
import { Button } from "react-bootstrap";

// Editor Component
import Editor from "./components/ReactQuill";

export default function App() {
  const [steps, setStep] = useState([
    {
      step: 1,
      response: ""
    },
    {
      step: 2,
      response: ""
    }
  ]); // For Default Two Inputs

  const handleChange = (value, index) => {

    // Updates, Remove and Replaces an object at index n
    const steptoReplace = steps[index];
    steptoReplace.response = value;

    steps.splice(index, 1);
    steps.splice(index, 0, steptoReplace);

    setStep(steps);
  };

 // Adds an empty entry
  const addStep = () => {
    setStep([
      ...steps,
      {
        step: steps.length + 1,
        response: ""
      }
    ]);
  };

  const reduceStep = () => {
    // To have Two text editor always
    if (steps.length > 2) {
      steps.pop();
      setStep([...steps]);
    }
  };

  const submit = () => {
    // You will have an Array of Objects of all steps
    console.log("steps", steps);
  };

  return (
    <div className="container">
      <h1>Multiple React Quill</h1>
      <div className="mt-4">
        {steps.map((step, index) => (
          <div key={index}>
            Step {index + 1}
            <Editor
              response={step.response}
              handleChange={(value) => handleChange(value, index)}
            />
          </div>
        ))}

        <div className="d-flex mt-4  justify-content-between">
          <Button onClick={addStep}>Add Step </Button>
          <Button onClick={reduceStep}>Remove Step</Button>
        </div>

        <Button className="mt-4" onClick={() => submit()}>
          Submit
        </Button>
      </div>
    </div>
  );
}
于 2021-08-18T14:21:09.093 回答