2
votes

React enregistre la valeur de l'état actuel et le rend immuable

Je suis nouveau dans React et j'ai un problème pour enregistrer la valeur de l'état actuel. Je ne sais pas si c'est possible.

Pour résumer, j'ai construit une fonction qui renvoie un élément HTML comme ci-dessous. L'idée est de sauvegarder un div à chaque clic.

3
3
3

La valeur de freetextinput change à chaque clic. L'idée est de sauvegarder toute la valeur de freetextinput. Disons que les valeurs de freetextinput sont 1, 2, 3. Je voudrais avoir les trois valeurs:

1
2
3

Cependant, je n'obtiens que quelque chose comme ceci: p>

createQuestion(){
        let CurrentQuestion=this.state.freetextinput;
        return this.state.values.map((el, i) => 
         <div key={i} className="QuestionBox">
            {CurrentQuestion}
         </div>          
        )
    }

Je me demande s'il existe un moyen de sauvegarder / stocker la valeur de this.state.freetextinput, de sorte que je puisse obtenir les trois valeurs.

reactjs

1 commentaires

donc la saisie de texte libre est pour chaque question?

3 Réponses :

1
votes

Vous devez mapper this.state.freetextinput directement:

Puisque freetextinput est une chaîne, vous devrez d'abord le convertir en un tableau en utilisant split

createQuestion(){
    return this.state.freetextinput.split(', ').map(el =>
        <div key={el} className="QuestionBox">
            {el}
        </div>
    )
}

Cela fonctionnera si votre chaîne ressemble à: "1, 2, 3" Si votre chaîne est "123" , utilisez split ('') au lieu de split (',')

p >

6 commentaires

Je l'ai essayé, mais il renvoie "TypeError: undefined n'est pas une fonction (près de '... this.state.freetextinput.map ...')"

Qu'est-ce que freetextinput ?

Merci beaucoup pour la réponse. Je pense que le problème est que mon entrée freetext n'est pas un tableau. :(

C'est une valeur (chaîne) donnée par l'entrée de l'utilisateur, dans mon code la valeur provient de setState

J'ai essayé de donner une entrée utilisateur, si c'est une entrée valide, j'essaye de pousser la valeur dans un tableau, de cette façon j'enregistre les valeurs, j'espère que cela aide

Merci beaucoup!! Cela semble très bien! J'essaye de l'adapter à mon code!

2
votes

Enregistrez chaque entrée de saisie de texte libre dans un tableau, de cette façon vous auriez accès à toutes les valeurs:

Vous pouvez vérifier ce bac à sable de code: https://codesandbox.io/s/j835121kv < / p>

5 commentaires

Merci pour l'aide. Mais la valeur de la saisie de texte libre est donnée par l'entrée utilisateur, je ne peux pas définir la valeur à l'avance. :(

Je suggérerais de stocker toutes les valeurs précédentes de la saisie de texte libre dans un type de tableau de structure de données de cette façon, vous pouvez accéder à toutes les valeurs

Cela pourrait être une bonne idée. Mais - désolé, je suis vraiment nouveau dans React - comment pourrais-je enregistrer la valeur dans le tableau? Je veux dire, quand j'essaye d'enregistrer la valeur, j'utiliserais quelque chose comme setState ({QuestionID1: this.state.freetextinput}). Mais à chaque fois que vous ajoutez le tableau, les autres valeurs sont également modifiées, non? Parce qu'ils sont tous définis comme this.state.freetextinput.

@ShaLi, veuillez accepter ou voter pour si ma réponse vous a aidé :)

Geeky: en général, nous recommandons que les réponses contiennent du code ou une explication de la solution ainsi qu'un lien. Votre message offre une phrase d'aide, mais je me demande, êtes-vous en mesure de développer cela? C'est un peu bref pour le moment, et presque une réponse de lien seulement.

3
votes

La nouvelle question doit être placée dans un tableau avant de pouvoir être mappée. Quelque chose comme ça pourrait fonctionner pour vous?

var savedQuestions = []

createQuestion(q){        
  savedQuestions.push(q)
  this.setState({savedQuestions: savedQuestions}, () => {
    var questionElements = this.state.savedQuestions.map((el, i) => 
     <div key={i} className="QuestionBox">
        {el}
     </div>          
    )
    })
    return questionElements
}

0 commentaires