Morioh
Login
Thadée Cisowski

Thadée Cisowski

6 months ago

Comment implémenter le bouton radio dans React

Un bouton radio est un élément d'interface utilisateur graphique qui vous permet de choisir une seule option parmi un ensemble d'options mutuellement exclusives. Ils sont généralement représentés sous forme de petits cercles sur lesquels vous pouvez cliquer pour les sélectionner. Lorsqu'un bouton radio d'un groupe est sélectionné, tous les autres boutons de ce groupe sont automatiquement désélectionnés. Cela garantit qu’une seule option peut être choisie à la fois.

 

Dans ce didacticiel, nous apprendrons comment créer un groupe de boutons radio dans React.js à l'aide de la bibliothèque moderne d'interface utilisateur de matériaux React dans un composant fonctionnel.

Aperçu:

Tutoriel sur la personnalisation et la mise en œuvre des boutons radio de l'interface utilisateur de React Material

Table des matières

  • Étape 1 : Configurer un nouveau projet
  • Étape 2 : configurer l'interface utilisateur de React Material
  • Étape 3 : Créer un composant de fonction
  • Étape 4 : Créer un bouton radio de l'interface utilisateur matérielle
  • Étape 5 : Modifier la direction du bouton radio
  • Étape 6 : Personnaliser le bouton radio
  • Étape 7 : mettre à jour le composant global
  • Étape 8 : Exécuter l'application sur le navigateur

Étape 1 : Configurer un nouveau projet

Afin de configurer une application React. Nous avons besoin de node, de npm et d'un éditeur de code, si vous avez mis toutes les armes dans l'arsenal, alors allez-y et créez la nouvelle application.

npx create-react-app react-blog-app

Assurez-vous d'accéder au dossier de l'application.

cd react-blog-app

Étape 2 : Configurer l'interface utilisateur de React Material

Maintenant, le projet est créé. Ensuite, vous devez installer l'interface utilisateur matérielle et ses dépendances principales dans le projet React.

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @fontsource/roboto --legacy-peer-deps

Naviguez jusqu'au fichier App.css, ici dans ce fichier vous devez ajouter le code donné.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Étape 3 : Créer un composant de fonction

Pour créer un bouton radio, nous avons besoin d'un composant séparé, donc créez le dossier components/ et le Fichier Form.js.

import React from 'react'
function Form() {
  return (
    <div>Form</div>
  )
}
export default Form

Étape 4 : Créer un bouton radio de l'interface utilisateur du matériau

RadioGroup est un wrapper précieux principalement utilisé pour regrouper les composants Radio.

Il offre plutôt une API plus simple et une accessibilité clavier appropriée au groupe.

Pour créer un groupe radio simple, vous devez ajouter le code dans le fichier components/Form.js.

import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
export default function Form() {
  return (
    <FormControl>
      <FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
      <RadioGroup
        aria-labelledby="demo-radio-buttons-group-label"
        defaultValue="female"
        name="radio-buttons-group"
      >
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
        <FormControlLabel value="other" control={<Radio />} label="Other" />
      </RadioGroup>
    </FormControl>
  );
}

Étape 5 : Modifier la direction du bouton radio

Vous pouvez changer la direction du groupe Radio en utilisant la propriété row. Pour définir les boutons horizontalement, ajoutez le prop de ligne dans le RadioGroup.

import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
export default function Form() {
  return (
    <FormControl>
      <FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
      <RadioGroup
        row
        aria-labelledby="demo-radio-buttons-group-label"
        defaultValue="female"
        name="radio-buttons-group"
      >
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
        <FormControlLabel value="other" control={<Radio />} label="Other" />
      </RadioGroup>
    </FormControl>
  );
}

Étape 6 : Personnaliser le bouton radio

La personnalisation est relativement facile avec l’interface utilisateur matérielle. Dans l'exemple suivant. Nous changeons simultanément la couleur et la taille du groupe Radio.

import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import { pink } from '@mui/material/colors';
export default function Form() {
  const [selectedValue, setSelectedValue] = React.useState("a");
  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };
  const controlProps = (item) => ({
    checked: selectedValue === item,
    onChange: handleChange,
    value: item,
    name: "size-radio-button-demo",
    inputProps: { "aria-label": item },
  });
  return (
    <FormControl>
      <FormLabel id="demo-radio-buttons-group-label">Choose Gender</FormLabel>
      <RadioGroup
        row
        aria-labelledby="demo-radio-buttons-group-label"
        defaultValue="female"
        name="radio-buttons-group"
      >
        <FormControlLabel
          value="female"
          control={<Radio {...controlProps("a")} size="small" />}
          label="Female"
        />
        <FormControlLabel
          value="male"
          control={
            <Radio
              {...controlProps("c")}
              sx={{
                "& .MuiSvgIcon-root": {
                  fontSize: 28,
                  color: pink[800],
                  "&.Mui-checked": {
                    color: pink[600],
                  },
                },
              }}
            />
          }
          label="Male"
        />
        <FormControlLabel
          value="other"
          control={
            <Radio
              {...controlProps("c")}
              sx={{
                "& .MuiSvgIcon-root": {
                  fontSize: 32,
                },
              }}
            />
          }
          label="Other"
        />
      </RadioGroup>
    </FormControl>
  );
}

Étape 7 : Mettre à jour le composant global

Nous avons créé un composant Form distinct, qui n'est pas enregistré dans React. Afin d'enregistrer le composant Form, ajoutez le composant Form dans le fichier App.js.

import React from "react";
import Form from "./components/Form";
function App() {
  return (
    <div>
      <h2>React Material UI Radio Button Example</h2>
      <Form />
    </div>
  );
}
export default App;

Étape 8 : Exécuter l'application sur le navigateur

Nous avons presque fini; la tâche finale consiste à appeler le serveur d'applications React. Après avoir exécuté l'application, l'URL de l'application sera imprimée sur l'écran de la console et vous pourrez l'utiliser pour afficher l'application.

npm start
http://localhost:3000

Conclusion

Dans ce didacticiel étape par étape, vous avez vu comment créer un groupe de boutons radio simple dans React.

4.80 GEEK