reactjs - 当设置了使用 useState 钩子的 onChange 时,RadioGroup 不会选择
问题描述
我有一个很好用的 RadioGroup。当我将该 RadioGroup 移动到它自己的功能中时——“选择”不起作用。就好像组件无法完全重新渲染一样。当我附加一个onChange
使用状态挂钩的事件时,就会发生这种情况。您可以在这里看到,收音机 1 和 2 运行良好。收音机 3 和 4 没有。
这是我正在使用的组件。未包装到函数中的 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>
);
}
帮助将不胜感激。
解决方案
您的包装组件必须接受onChange
处理程序作为道具,以及inputs
. 此外,您可以将其移到父组件之外以获得更好的可读性:
const NotWorking = props => {
return (
<RadioGroup aria-label="two" name="two" row onChange={props.onChange}>
<FormControlLabel
value="3"
control={<Radio color="primary" />}
label="3"
labelPlacement="end"
/>
<FormControlLabel
value="4"
control={<Radio />}
label="4"
labelPlacement="end"
/>
</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}`);
};
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 onChange={handleInputChange} />
</React.Fragment>
);
}
推荐阅读
- mongodb - MongoDB 中配置文件的 rs.slaveOk() 等价物是什么?
- numpy - 将 DICOM 图像转换为形状的 numpy 数组(s、3、256、256)
- node.js - SQLITE_BUSY Node.js 的 Azure 只读问题
- separation-of-concerns - 如何在 alt:V 中设置资源依赖项
- php - 移动设备上的下拉菜单选项卡仅在一个选项卡中显示内容
- python - 如何在熊猫数据框中将时间戳分类为晚上?
- sql - 在 Postgres 中执行 sql 查询的问题
- java - 使用休眠搜索按枚举字段排序
- angular - 如何更改表中值的格式?
- flutter - Flutter 是否支持 Google Assistant Read It 功能?