#css #reactjs
#css — код #reactjs
Вопрос:
Здравствуйте, у меня возникла проблема с созданием группы переключателей, когда я выбираю опцию в другой группе, она отменяет выбор другой группы
это и есть код:
<>
<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
Ответ №1:
в вашем 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