Il valore dell'editor di testo scompare in React Js

Question

Sto realizzando una semplice fisarmonica e all'interno di ogni fisarmonica c'è un editor di testo.

Accordion.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>

Qui la fisarmonica è composta come un componente. Questa linea {toggleValue === index && item.content && <EditorContainer />} viene creata per controllare la fisarmonica su cui si è cliccato e quindi carica il contenuto e l'editor di testo di conseguenza.

Esempio di lavoro completo:

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

Passaggi per riprodurre il problema:

-> Apri il link sopra

-> Ci saranno tre fisarmoniche

-> Fare clic su una delle fisarmoniche, che cambierà il testo da Espandi a Riduci

-> Ora inserisci del testo casuale all'interno dell'editor, quindi fai clic sul testo Riduci

-> Apri di nuovo la stessa fisarmonica facendo clic su Espandi

-> Ora manca il valore già inserito

Dubito che accada perché ogni volta che espandiamo / riduciamo, il componente text_editor.js viene chiamato e che ha il valore di stato come,

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

Qui invece di EditorState.createEmpty (), dovrei dare un'altra cosa?

Requisiti:

Come posso memorizzare il valore già inserito nell'editor di testo. Anche se l'utente fa clic su Espandi / Riduci, il testo inserito deve rimanere lì nell'editor.

Ogni aiuto è molto apprezzato.

Answer 1

Hai ragione, il valore inserito manca perché stai smontando il EditorContainercomponente quando è ridotto - che quando lo espandi di nuovo ne crea uno nuovo editorStateche è vuoto.

2 Possibili soluzioni a cui potrei pensare.

1. Spostare editorStatee onEditorStateChangeal componente padre e passarlo a EditorContainer. In questo modo, quando smontiamo il EditorContainernon perderemo il precedente editorStateperché è sul Parent.

2. Avvolgiamo il nostro EditorContainerinterno a dive applicheremo uno displaystile quando alterniamo tra restringimento / espansione. In questo modo, stiamo solo nascondendo il EditorContainernon smontaggio in modo statesche rimanga.

Sceglierei di implementare la seconda soluzione perché dobbiamo solo apportare modifiche al nostro Accordion.jsfile. In entrambi i modi, creerei un nuovo componente che gestisca l'elemento corrente. Lo chiamo 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>
  );
};

Quindi sul nostro NormalAccordionuseremo NormalAccordionItem.

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

Ecco fatto, controlla la demo qui sotto.

Modifica Demo aggiornata per espandere NormalAccordionItemuno alla volta.