Блог

Я хочу выбрать только один вариант в группе переключателей. я могу найти код компонента класса только в Интернете. Также помогите мне с функцией onChange, чтобы справиться с этим.

 const [radioOption, setradioOption]= useState(true)  const handleRadioChange = () =gt;{  }  return( lt;gt; lt;Form.Group   inline   style={{  display:'flex',   justifyContent:'space-between'}}  gt;  lt;Form.Radio  onChange={handleRadioChange}  value="All devices"  label='All devices'   defaultChecked/gt;   lt;Form.Radio  onChange={handleRadioChange}  value='Mobile only'  label='Mobile only'/gt;   lt;Form.Radio  onChange={handleRadioChange}  value='Desktop only'  label='Desktop only'/gt;  lt;/Form.Groupgt;   lt;/gt;)  

Для выбора только one option в group of radio buttons том, что вам нужно использовать same name в каждом input of radio . Чтобы сохранить ваш выбор, мы можем использовать useState . Вот полный пример:

 import React, { useState } from "react";  function Demo() {  const [gender, setGender] = useState("Male");   function onChangeValue(event) {  setGender(event.target.value);  console.log(event.target.value);  }   return (  lt;div onChange={onChangeValue}gt;  lt;input type="radio" value="Male" name="gender" checked={gender === "Male"} /gt; Male  lt;input type="radio" value="Female" name="gender" checked={gender === "Female"}/gt; Female  lt;input type="radio" value="Other" name="gender" checked={gender === "Other"} /gt; Other  lt;/divgt;  ); }  export default Demo;