我有一个RadioGroup,效果很好。我将RadioGroup移至其自身功能的那一刻-“选择”不起作用。好像组件无法完全重新渲染。当我附加一个使用状态挂钩的onChange
事件时,就会发生这种情况。您可以在此处看到,收音机1和2运作良好。收音机3和4不会。
CodeSandbox Material UI RadioBox Example
这是我正在使用的组件。未包装到函数中的RadioGroup效果很好。一个是-它不会“选择”。意味着黑点不会出现在选择单选按钮中。
function Demo(props) {
const [inputs,setInputs] = useState({});
const handleInputChange = event => {
event.persist();
setInputs(inputs => ({
...inputs,[event.target.name]: event.target.value
}));
console.debug(`${event.target.name}: ${event.target.value}`);
};
const NotWorking = props => {
return (
<RadioGroup aria-label="two" name="two" row onChange={handleInputChange}>
<FormControlLabel
value="3"
control={<Radio color="primary" />}
label="3"
labelPlacement="end"
/>
<FormControlLabel
value="4"
control={<Radio />}
label="4"
labelPlacement="end"
/>
</RadioGroup>
);
};
return (
<React.Fragment>
<RadioGroup aria-label="one" name="one" row onChange={handleInputChange}>
<FormControlLabel
value="1"
control={<Radio color="primary" />}
label="1"
labelPlacement="end"
/>
<FormControlLabel
value="2"
control={<Radio />}
label="2"
labelPlacement="end"
/>
</RadioGroup>
<NotWorking />
</React.Fragment>
);
}
我们将不胜感激。