const WithOnChangeHandlers = () => {
const [selectedRadioValue, setSelectedCheckboxValues] = React.useState('two')
const [selectedRadioId, setSelectedRadioId] = React.useState()
const handleRadioGroupChange = (selectedValue, e) => {
setSelectedCheckboxValues(selectedValue)
setSelectedRadioId(e.currentTarget.id)
}
const handleChoiceOneChange = e => {
alert('Choice one has its own handler')
}
return (
<Box display="grid" sx={{gap: 1}}>
<RadioGroup name="choiceGroup" onChange={handleRadioGroupChange}>
<RadioGroup.Label>Choices</RadioGroup.Label>
<FormControl>
<Radio value="one" onChange={handleChoiceOneChange} />
<FormControl.Label>Choice one</FormControl.Label>
</FormControl>
<FormControl>
<Radio value="two" defaultChecked />
<FormControl.Label>Choice two</FormControl.Label>
</FormControl>
<FormControl>
<Radio value="three" />
<FormControl.Label>Choice three</FormControl.Label>
</FormControl>
</RadioGroup>
{selectedRadioValue && <div>The selected radio value is {selectedRadioValue}</div>}
{selectedRadioId && <div>The last selected radio ID is {selectedRadioId}</div>}
</Box>
)
}
render(<WithOnChangeHandlers />)