1
votes

Modification de l'état de plusieurs éléments de la page

Dans mon react-app, j'ai une liste qui est rendue dynamiquement à partir d'un tableau, chaque élément a une case à cocher et une entrée, l'entrée par défaut est désactivée, lorsque je clique sur la case à cocher cette entrée doit être activée si elle répond une condition spécifique, j'ai réussi à faire une partie du travail, mais je suis confronté à des problèmes comme lorsque je clique sur l'une des cases à cocher toutes les entrées sont activées, et cette entrée a une valeur que je veux pouvoir modifier mais je ne peux pas voici le code:

État initial

return this.state.cards.map(card => (
<Checkbox key={card.id} onClick={this.setState({ disabledInput: true })} />
<Input value={this.state.card.name} disabled={this.state.disabledInput} onChange={e => this.setState({ text: e.target.value })} />
));

Mappage de la liste: p >

cards: [],
disabledInput: false

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Vous devez maintenir un indicateur disabledInput pour chaque carte, à la minute où vous n'en avez qu'un sur toutes les cartes.

L'état de votre carte devrait ressembler à quelque chose comme -

cards = [{
   name: 'card 1',
   disabledInput: false
}, {
   name: 'card 2',
   disabledInput: true
}]

1 commentaires

pouvez-vous mettre cela en œuvre dans votre réponse, s'il vous plaît?

0
votes

Chaque case à cocher doit avoir un booléen pour gérer son propre état (coché ou non). J'ai créé une Codesandbox qui devrait résoudre votre problème

0 commentaires

1
votes

Vous devez conserver les états de désactivation initiaux de chaque case à cocher true en tant que tableau et les mapper individuellement dans chaque case à cocher.

cards = [{
 name: 'card 1',
 disabledInput: true
 }, {
 name: 'card 2',
 disabledInput: true
}]

changeDisableState = (i) => {
  let cards = this.state.cards;
  cards[i].disabledInput = !cards[i].disabledInput;
  this.setState({cards});
}

return this.state.cards.map((card, i) => (
<Checkbox key={card.id} onClick={() => this.changeDisableState(i)} />
<Input value={card.name} disabled={card.disabledInput}/>
));

Modifié : au lieu d'un autre tableau, vous pouvez garder un champ de désactivation à l'intérieur de l'état de la carte lui-même.

0 commentaires