Problème de rendu du composant [extrait de code joint]

Question

Je fais une application de création de CV et toute la structure était presque terminée.

Codes de travail complets et boîte:

Ici, j'ai fait des composants en stepper pour chaque section,

index.js

<form onSubmit={handleSubmit}>
        <Stepper
          steps={sections}
          activeStep={currentPage}
          activeColor="red"
          defaultBarColor="red"
          completeColor="green"
          completeBarColor="green"
        />

        {currentPage === 1 && (
          <>
            <BasicDetails />
            <button onClick={next}>Next</button>
          </>
        )}

        {currentPage === 2 && (
          <>
            <EmploymentDetails />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <button onClick={prev}>Back</button>
              <button onClick={next}>Next</button>
            </div>
          </>
        )}

        {currentPage === 3 && (
          <>
            <pre>{JSON.stringify(value, null, 2)}</pre>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <button onClick={prev}>Back</button>
              <button onClick={handleSubmit}>Submit</button>
            </div>
          </>
        )}
      </form>

Étapes pour reproduire le problème:

-> Dans Step 1Entrez First Name, Last NameetProfile Summary

-> Cliquez sur le Nextbouton pour passer à l'étape suivante.

-> Cliquez ensuite sur le bouton de retour pour revenir en arrière vers Step 1(actuellement dans Step 2)

-> Voici les valeurs dans First Name, Last Namesont là mais la valeur saisie dans l'éditeur de texte seule se perd

Veuillez vous référer à l'image ci-dessous avec la valeur de l'éditeur de texte saisie pour une meilleure compréhension du problème auquel je suis confronté.

La valeur de l'éditeur de texte seule est perdue si nous changeons forth/backles étapes. Mais la valeur saisie est stockée sous la forme Contexte et n'est pas rendue dans la zone Editeur de texte.

Remarque:

L'éditeur de texte est fait en tant que composant et il a été utilisé dans Step 1(Pour le résumé du profil) et aussi dans Step 2(Pour la description de l'emploi) et dans les deux cas, en passant d'une étape à l'autre, la valeur saisie dans l'éditeur de texte est perdue.

Une analyse:

D'après ma compréhension, cela se produit parce que lors de la navigation vers d'autres étapes, le composant est rendu à nouveau et le EditorContainercomposant est appelé et text_editor.jsil a été donné

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

Donc, il a été créé comme vide.

Alors, comment puis-je contrôler le composant pour qu'il ne soit pas restitué afin que les données saisies dans l'éditeur de texte ne soient pas perdues.

Merci de bien vouloir m'aider à conserver les valeurs saisies dans l'éditeur de texte. Un grand merci à l'avance.

Answer 1

Cela se produit parce que nous enregistrons uniquement notre EditorContainervaleur dans notre Context, mais nous ne l'utilisons pas lorsque nous rendons le EditorContainercomposant.

---

Le correctif serait de passer le sauvegardé valuecomme accessoire à notre EditorContainercomposant.

Ensuite , avant de rendre le EditorContainer, nous allons convertir que valuepour ce EditorStatequi peut être fait en utilisant la convertFromHTMLfonction, et définir que notre editorStateétat.

Étape 1: Passez l' valueaccessoire àEditorContainer

// basic_details.js
<EditorContainer
 name="profileSummary"
  value={basicDetails.profileSummary}
  onChange={(event) => handleInputChange(event)}
/>

// employment_details.js
<EditorContainer
  name="description"
  value={inputField.description}
  onChange={(event) => handleInputChange(index, event)}
/>

Étape 2: Convertissez l' valueaccessoire enEditorState

// text_editor.js
...

componentDidMount() {
  // https://draftjs.org/docs/api-reference-data-conversion/#convertfromhtml

  const { value } = this.props;
  const blocksFromHTML = convertFromHTML(value);
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap,
  );

  const editorState = EditorState.createWithContent(state);
  this.setState({ editorState });
}

C'est ça! Consultez la démo ci-dessous.

Modifiez la démo Fix pour vérifier valuesi c'est une chaîne.

Answer 2

c'est une excellente question. Il s'agit essentiellement d'un problème d'approche de conception: pour un scénario comme le vôtre, vous devez concevoir votre composant de cette façon:

analysons l'image:

COMPOSANT PRINCIPAL:

C'est le composant qui doit conserver l'état pendant tout le processus de remplissage de formulaire. STE1-4 Ce ne sont que des vues qui vous permettent de saisir des données qui doivent toutes être mises à jour dans le composant principal. Cela signifie donc que vous devez avoir l'état dans le composant principal et transmettre les propriétés d'état et props, y compris leurs méthodes de mise à jour / définition.

COMPOSANT STEP Ceci s'applique à tous les composants Step. Ces composants ne doivent rien faire d'autre que d'afficher l'étape de formulaire en utilisant les valeurs d'état reçues via propset de mettre à jour l'état en utilisant des méthodes de définition, qui sont également reçues via props.

---

Conclusion:

Mettez votre état dans votre composant principal, chaque composant d'étape ne doit afficher que le formulaire et mettre à jour l'état principal. Cela signifie qu'au moment où chaque composant d'étape est de nouveau rendu, il recevra des valeurs mises à jour dans le composant principal. Et vous y parviendrez via props.

Answer 3

C'est très simple: vous devez stocker l'état des éditeurs dans votre composant parent. Essayez d'utiliser l'état BasicDetails pour cela.