Der Texteditorwert verschwindet in React Js

Question

Ich mache ein einfaches Akkordeon und in jedem Akkordeon gibt es einen Texteditor.

Akkordeon.js

<div className="wrapper">
  {accordionData.map((item, index) => (
    <Accordion>
      <Heading>
        <div
          style={{ padding: "10px", cursor: "pointer" }}
          className="heading"
          onClick={() => toggleHandler(index)}
        >
          {toggleValue !== index ? `Expand` : `Shrink`}
        </div>
      </Heading>
      <Text>  {toggleValue === index && item.content && <EditorContainer />} </Text>
    </Accordion>
  ))}
</div>

Hier besteht Akkordeon als Bestandteil. Diese Zeile {toggleValue === index && item.content && <EditorContainer />} dient dazu, das angeklickte Akkordeon zu überprüfen und lädt dann den Inhalt und den Texteditor entsprechend.

Vollständiges Arbeitsbeispiel:

https://codesandbox.io/s/react-accordion-forked-dcqbo

Schritte zum Reproduzieren des Problems:

-> Öffnen Sie den obigen Link

-> Es wird drei Akkordeons geben

-> Klicken Sie auf eines der Akkordeons, um den Text von " Erweitern" in " Verkleinern" zu ändern

-> Füllen Sie nun zufälligen Text in den Editor und klicken Sie auf den Text Verkleinern

-> Öffnen Sie das gleiche Akkordeon erneut, indem Sie auf Erweitern klicken

-> Jetzt fehlt bereits eingegebener Wert

Ich bezweifle, dass dies passiert, weil jedes Mal, wenn wir erweitern / verkleinern, die Komponente text_editor.js aufgerufen wird und der Statuswert wie folgt lautet:

this.state = {
  editorState: EditorState.createEmpty()
};

Sollte ich hier anstelle von EditorState.createEmpty () etwas anderes angeben müssen?

Anforderung:

Wie kann ich den bereits eingegebenen Wert im Texteditor speichern? Obwohl Benutzerklicks erweitern / verkleinern, muss der eingegebene Text im Editor verbleiben.

Jede Hilfe wird sehr geschätzt.

Answer 1

Sie haben EditorContainerRecht , der eingegebene Wert fehlt, weil Sie die Komponente beim Verkleinern aushängen. Wenn Sie sie erneut erweitern, wird eine neue Komponente erstellt, editorStatedie leer ist.

2 Mögliche Lösungen, die mir einfallen könnten.

1. Verschieben Sie editorStateund onEditorStateChangezur übergeordneten Komponente und übergeben Sie diese an EditorContainer. Auf diese Weise EditorContainerverlieren wir beim Aushängen des vorherigen nicht das vorherige, editorStateda es sich um das übergeordnete Element handelt.

2. Wir wickeln unser EditorContainerInneres ein divund wenden einen displayStil an, wenn wir zwischen Verkleinern / Erweitern wechseln. Auf diese Weise verstecken wir nur das EditorContainerNicht-Abhängen, damit es erhalten statesbleibt.

Ich würde mich für die Implementierung der zweiten Lösung entscheiden, da wir nur Änderungen an unserer Accordion.jsDatei vornehmen müssen . In beiden Fällen würde ich eine neue Komponente erstellen, die das aktuelle Element behandelt. Ich nenne es NormalAccordionItem.

const NormalAccordionItem = ({ data }) => {
  const [show, setShow] = useState(false);

  function toggle() {
    setShow((prev) => !prev);
  }

  return (
    <Accordion>
      <Heading>
        <div
          style={{ padding: "10px", cursor: "pointer" }}
          className="heading"
          onClick={toggle}
        >
          {show ? "Shrink" : "Expand"}
        </div>
      </Heading>
      <Text>
        <div style={{ display: show ? "block" : "none" }}> // notice this
          <EditorContainer />
        </div>
      </Text>
    </Accordion>
  );
};

Dann werden NormalAccordionwir auf unserer verwenden NormalAccordionItem.

const NormalAccordion = () => {
  return (
    <div className="wrapper">
      {accordionData.map((data) => (
        <NormalAccordionItem data={data} key={data.id} />
      ))}
    </div>
  );
};

Das war's, schau dir die Demo unten an.

Bearbeiten Sie die aktualisierte Demo, um sie einzeln zu erweitern NormalAccordionItem.