Bouton radio dans React

1. Boutons radio dans React
2. Composant radio personnalisé

Tout développeur qui a déjà créé un formulaire simple dans n’importe quel framework JavaScript doit être familiarisé avec les boutons radio. Il s’agit du type par défaut <input/> à utiliser pour permettre aux utilisateurs de choisir entre plusieurs options. Examinons deux approches pour implémenter des boutons radio dans React.

Boutons radio dans React

L’implémentation de base des boutons radio dans JSX est très similaire à HTML. Regardons un exemple :

<div>
     <input type="radio" name="theme" value="DARK"/>Dark
     <input type="radio" name="theme" value="LIGHT"/>Light
</div>

Ce code JSX peut être facilement confondu avec du HTML normal. Au fur et à mesure que nous introduisons des fonctionnalités plus complexes, comme la mise à jour de l’état après un événement onChange, les différences entre HTML et JSX deviennent plus visibles. Regardons cet exemple :

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    return <div onChange={(e) => this.setState({theme: e.target.value})}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
  }
}

Dans ce code, les utilisateurs ont deux options : Dark et Light. Chaque fois qu’ils choisissent l’un d’entre eux, nous capturons la valeur dans l’attribut value de l’élément d’entrée et définissons la propriété theme de l’état sur celle-ci. Pour une meilleure démonstration, regardez l’exemple app playcode.

Notez que le gestionnaire d’événements est placé entre une paire d’accolades. Il est nécessaire de faire comprendre que l’expression entre accolades doit être exécutée en tant que code JavaScript.

En tant que développeur, vous n’êtes pas limité par votre choix de gestionnaire d’événements. Vous pouvez utiliser onChange, onSubmit si vos boutons radio sont placés dans un formulaire onClick si vous utilisez des boutons pour soumettre votre choix.

.map()

Si vous avez un tableau d’options, vous pouvez utiliser la méthode .map() pour afficher chacune d’entre elles. Par exemple, si vous avez une liste de couleurs parmi lesquelles vous souhaitez permettre à vos utilisateurs de choisir, vous pouvez :

const arr = ["white", "black", "blue", "green"]
return (
        <div>
        {
            arr.map(color => 
                <input type="radio" name="colors" value={color} />
                   )  
                 }
        </div>
)

Les accolades dans l’élément <div> indiquent à React que les expressions qu’il contient doivent être exécutées en tant que code JavaScript.

Une fois le code exécuté, vous vous retrouverez avec quatre éléments <input> qui ont chacun un attribut value du tableau.

defaultVérifié

Pour cocher un bouton radio par défaut, vous pouvez utiliser l’attribut defaultChecked. Dans l’exemple ci-dessus, si nous voulions définir un thème sombre par défaut, voici à quoi ressemblerait notre élément :

<input type="radio" name="theme" defaultChecked value="DARK"/>Dark

Composant radio personnalisé

Lors du développement d’applications React, vous devez toujours essayer de les garder simples. De plus, si vous comptez beaucoup utiliser la fonctionnalité des boutons radio, vous pouvez éviter la répétition du code en créant un composant radio personnalisé.

const Radio = ({handler, theme}) => {
  return <div style={{height: "500px", width: "500px", backgroundColor:                                 theme.toLowerCase() === "light" ? "white" : "black"}} 
                onChange={handler}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    const handleChange = (e) => this.setState({theme: e.target.value})
    return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
  }
}

En haut, nous avons créé un composant de fonction sans état appelé Radio. Nous pouvons transmettre les gestionnaires d’événements en tant qu’accessoires, il n’y a donc aucune raison réelle pour que ce composant enfant initie l’état. Les composants muets (ceux sans état) sont également plus faciles à tester et à entretenir.