Travailler avec les radio dans React
Travailler avec les boutons radio
radio est quelque peu différent, par exemple,
de ces mêmes cases à cocher. Le problème est que
plusieurs boutons radio auront le même état,
mais des value différentes.
Par conséquent, le travail s'effectue de la manière suivante :
à chaque bouton radio, on enregistre sa valeur dans l'attribut value,
et dans l'attribut checked
- une condition spéciale qui vérifie
si l'état est égal à une certaine valeur. Si
il est égal - le bouton radio deviendra coché,
et s'il n'est pas égal - il sera décoché.
Voici la mise en œuvre de ce qui a été décrit :
function App() {
const [value, setValue] = useState(1);
function changeHandler(event) {
setValue(event.target.value);
}
return <div>
<input
type="radio"
name="radio"
value="1"
checked={value === '1' ? true : false}
onChange={changeHandler}
/>
<input
type="radio"
name="radio"
value="2"
checked={value === '2' ? true : false}
onChange={changeHandler}
/>
<input
type="radio"
name="radio"
value="3"
checked={value === '3' ? true : false}
onChange={changeHandler}
/>
</div>
}
Il y a 3 boutons radio. Un paragraphe est donné. Faites en
sorte que la valeur du bouton radio sélectionné
s'affiche dans ce paragraphe.
À l'aide de boutons radio, demandez à l'utilisateur son langage de programmation préféré. Affichez son choix dans un paragraphe. Si le langage JavaScript est choisi, félicitez l'utilisateur.
