J'ai un bouton radio qui, lorsqu'il est vrai / coché, affiche cette option comme sélection. Le problème que j'ai est que toutes les options sont sélectionnées comme vraies dans mon mappage de groupe radio. Voici un exemple de codesandbox - https://codesandbox.io/s/73k0onx32x

  <RadioGroup
    aria-label="matches"
    name="matches"
    value={String(this.state.value)}
    onChange={this.handlePersonToggle}
  >
    {data.map(person => (
      <FormControlLabel
        onClick={e => this.setState({ checked: !this.state.checked })}
        checked={this.state.checked}
        key={String(person.Id)}
        value={String(person.Id)}
        control={<Radio color="primary" />}
        label={
          <div>
            {this.state.checked === true && <div>if true show</div>}
          </div>
        }
      />
    ))}
  </RadioGroup>

Toute aide serait appréciée ici.

0
Tom Rudge 20 nov. 2018 à 13:12

3 réponses

Meilleure réponse

Voici la démo de travail: https://codesandbox.io/s/l261qp002m

enter image description here


Code final

class RadioButtonsGroup extends React.Component {
  state = {
    value: 1
  };

  handlePersonToggle = event => {
    // console.log(typeof event.target.value)   //string
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;
    return (
      <RadioGroup
        aria-label="matches"
        name="matches"
        value={String(this.state.value)}
      >
        {data.map(person => {
          return (
            <FormControlLabel
              onClick={e => this.handlePersonToggle(e)}
              key={String(person.Id)}
              value={String(person.Id)}
              control={<Radio color="primary" />}
              label={
                <div>
                  {this.state.value == person.Id ? <div>if true show</div> : ""}
                </div>
              }
            />
          );
        })}
      </RadioGroup>
    );
  }
}

Il y a plusieurs choses que nous devons corriger.

Premièrement, nous n'avons pas besoin de l'attribut checked sur le composant FormControlLabel et nous n'avons pas non plus besoin de gérer l'état vérifié, juste l'attribut value de RadioGroup et { Les composants {X4}} suffisent, tant qu'ils correspondent, il saura quelle option est sélectionnée.

Deuxièmement, puisque nous dépassons le String(this.state.value), par conséquent, notre event.target.value devient un string plutôt qu'un integer. Par conséquent, nous ne pouvons pas utiliser la comparaison stricte ===, nous utilisons à la place le ==.

Enfin, nous écrivons le gestionnaire d'événements pour l'événement onClick sur le composant FormControlLabel.

1
Nguyen You 20 nov. 2018 à 10:59

Votre gestion onClick est incorrecte. J'ai résolu le problème comme ci-dessous également

  <RadioGroup
    aria-label="matches"
    name="matches"
    value={String(this.state.value)}
    onChange={this.handlePersonToggle}
  >
    {data.map(person => (
      <FormControlLabel
        onClick={e => this.setState({ checked: person.Id })}
        checked={this.state.checked}
        key={String(person.Id)}
        value={String(person.Id)}
        control={<Radio color="primary" />}
        label={
          <div>{this.state.checked === person.Id && <div>true</div>}</div>
        }
      />
    ))}
  </RadioGroup>
0
alowsarwar 20 nov. 2018 à 10:28

L'état de votre composant contient une seule valeur, cochée, qui peut être définie sur true ou false. Vous aurez besoin de quelque chose comme une valeur contenant l'id de l'élément sélectionné.

Essayez quelque chose comme ça

<RadioGroup
  aria-label="matches"
  name="matches"
  value={String(this.state.value)}
  onChange={this.handlePersonToggle}
>
  {data.map(person => (
    <FormControlLabel
      onClick={e => this.setState({ selectedItem: person.Id })}
      checked={this.state.selectedItem === person.Id}
      key={String(person.Id)}
      value={String(person.Id)}
      control={<Radio color="primary" />}
      label={
        <div>
          {this.state.selectedItem === person.Id && <div>if true show</div>}
        </div>
      }
    />
  ))}
</RadioGroup>
1
korona 20 nov. 2018 à 10:22