1
votes

Comment gérer la baie enregistrée dans l'état Reactjs

ceci est mon premier message là-bas :)

Alors, comment gérer un tableau enregistré dans l'état reactjs?

Contexte: un site Web avec lequel je réagis, qui fournit des questions à choix multiples aux étudiants et qui est géré par l'enseignant, un cas académique

{
  "id": 0,
  "textvalue": "Les licornes existent-elles ?",
  "singlecorrectanswer": true,
  "explication": "hyhy-bÃ¨ikb_b",
  "answer": [
    {
      "id": 1,
      "author": 1,
      "textanswer": "Evidemment, oui",
      "correct": true
    },
    {
      "id": 2,
      "author": 1,
      "textanswer": "Bien sur que non",
      "correct": false
    }
  ]
}

Actuellement, j'ai ceci comme attribut d'une entrée pour la valeur de la question : this.state.question.text value Mais je ne peux pas modifier le champ en entrant du texte, peut-être parce que onChange n'est pas défini.

De plus, je souhaite que l'utilisateur puisse modifier chaque réponse. Pour la réponse, c'est le même problème: Je vais réaliser une carte sur mes "réponses", une solution est de créer une fonction onChange qui traitera l'index de la carte et le tableau de l'état et le modifiera. Mais cette solution est un peu moche. Avez-vous une meilleure solution pour lier automatiquement la "valeur" du champ à l'état?

Mes excuses pour mon anglais, je suis français

Merci

javascript reactjs json arrays

1 commentaires

Veuillez fournir le code de rendu de vue pour la question. L'objet JSON ne suffit pas.

3 Réponses :

0
votes

Vous devriez vraiment avoir fourni du code que nous pourrions examiner.

Oui, votre problème est probablement dû au fait que vous n'avez pas fourni d'événement onChange. Cela se trouve dans la documentation https://reactjs.org/docs/forms.html#controlled -composants

J'ai testé ceci ici: https://codesandbox.io/s/nervous-ives-ccy4u

0 commentaires

0
votes

J'ai trouvé une solution, mais ce n'est pas la meilleure. Comme jasdhfiu l'a dit, je devais fournir un événement onChange

Voici mon code

onChange: (e) => this.handleQuestionChange('textvalue', e.target.value)
onChange: (e) => this.handleQuestionChange('explication', e.target.value)
onClick={() => this.handleAnswerChange('correct', !answer.correct, index)
onChange: e => this.handleAnswerChange('textanswer', e.target.value, index)
onChange={e => this.handleQuestionThemeChange(e.target.value)}

Et mes événements qui sont placés sur des boutons:

handleQuestionChange = (field, value) => {
    let question = Object.assign({}, this.state.question);
    question[field] = value;
    this.setState({question}, () => this.updateError());
};

handleQuestionThemeChange = (value) => {
    let question = Object.assign({}, this.state.question);
    question.theme = this.state.themes.find(o => o.label === value);
    this.setState({question}, () => this.updateError());
};

handleAnswerChange = (field, value, index) => {
    let question = Object.assign({}, this.state.question);
    question.answer[index][field] = value;
    this.setState({question}, () => this.updateError());
};

0 commentaires

0
votes

Je vous suggère d'utiliser onBlur au lieu de onChange afin de ne pas avoir besoin de mettre à jour l'état à chaque changement de personnage. Pour utiliser onBlur, vous devez utiliser defaultValue au lieu de value.

  <input defaultValue={this.state.question.text value} onBlur={e => updateValue(e.target.value) /* your update function */} type='text' />

0 commentaires