I'm a newbie of ReactJS, I was mess around with this function. Here I'm got 3 group of checkbox so I wanna when I checked/unchecked 1st box (2nd,3rd) of group checkbox then it's same effected like this :https://www.loom.com/share/35506f4234a649a9b98213dd0430bf9e
I'm so grateful with every idea which community give me, tks you all
export const Vertical: ComponentStory<typeof EdsFormCheckbox> = () => {
const [isChecked, setChecked] = useState({checkOne:false,checkTwo: false,checkThree: false});
const handleClick = (e: ChangeEvent<HTMLInputElement>) => setChecked(isChecked.checkOne);
return (
<div>
<EdsCheckboxGroup
onChange={handleClick}
name="standard"
labelText="Standard"
className="gap-300"
>
<EdsFormCheckbox checked={isChecked.checkOne} labelText="Math"></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science"></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkThree} labelText="English"></EdsFormCheckbox>
</EdsCheckboxGroup>
<EdsCheckboxGroup
onChange={handleClick}
name="required"
labelText="Required"
className="gap-300"
>
<EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isRequired></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isRequired></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isRequired></EdsFormCheckbox>
</EdsCheckboxGroup>
<EdsCheckboxGroup
onChange={handleClick}
name="disable"
labelText="Disable"
className="gap-300"
>
<EdsFormCheckbox checked={isChecked.checkOne} labelText="Math" isDisabled></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkTwo} labelText="Science" isDisabled></EdsFormCheckbox>
<EdsFormCheckbox checked={isChecked.checkThree} labelText="English" isDisabled></EdsFormCheckbox>
</EdsCheckboxGroup>
Aucun commentaire:
Enregistrer un commentaire