Блог

Здравствуйте, у меня возникла проблема с созданием группы переключателей, когда я выбираю опцию в другой группе, она отменяет выбор другой группы

это и есть код:

 <>
      <div className="orientation_mode">
        <h1>Orientação do Dashboard</h1>
        <div className="options">
          <form>
            <fieldset id="orientation_mode">
              <RadioButton
                onChange={handleInputChange}
                id="vertical"
                color="#c8c8c8"
                name="orientation_mode"
                label="Vertical"
                value="vertical"
                checked={layoutStore.layoutType === 'vertical'}
              />
              <RadioButton
                id="horizontal"
                color="#c8c8c8"
                name="orientation_mode"
                onChange={handleInputChange}
                label="Horizontal"
                value="horizontal"
                checked={layoutStore.layoutType === 'horizontal'}
              />
            </fieldset>
          </form>
        </div>
      </div>
      <div className="theme_modes">
        <h1>Modo de Tema</h1>
        <div className="options">
          <form>
            <fieldset id="theme_modes">
              <RadioButton
                id="dark"
                name="theme_modes"
                onChange={handleInputChange}
                label="Dark"
                value="dark"
              />
              <RadioButton
                id="semidark"
                name="theme_modes"
                onChange={handleInputChange}
                label="Semi Dark"
                value="semidark"
              />
              <RadioButton
                id="light"
                name="theme_modes"
                onChange={handleInputChange}
                label="Light"
                value="light"
              />
            </fieldset>
          </form>
        </div>
</>
 

здесь есть полный код:

код и поле: https://codesandbox.io/s/recursing-shockley-9jvey?file=/src/RadioButton.tsx

на gif:

в вашем css измените focus на checked :

 amp;:checked   .radio__control { // style here }
 

на вашей радиокнопке добавьте другие свойства для ввода, в том числе type=radio :

 <input type="radio" className="radio" id={id} name={name} value={value} onChange={onChange} checked={checked} />
 

Определение типа onChange становится:

 onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 

в приложении добавьте состояния для управления theme и orientation :

   const [theme, setTheme] = useState('light');
  const [orientation, SetOrientation] = useState('horizontal');
  const handleTheme = (e: React.ChangeEvent<HTMLInputElement>) => setTheme(e.target.value)
  const handleOrientation = (e: React.ChangeEvent<HTMLInputElement>) => SetOrientation(e.target.value)
 

передача onChange и checked свойства, как показано ниже:

         <RadioButton
          id="dark"
          name="theme_modes"
          onChange={handleTheme}
          label="Dark"
          value="dark"
          checked={ theme === 'dark' } // you can also pass theme instead and validate inside RadioButton
        />
 

функциональный пример: https://codesandbox.io/s/quirky-cookies-1nru9?file=/src/App.tsx