当复选框由状态驱动时，复选框不响应onChange
西蒙·朗
我有一个材质用户界面Table，并一直在其上实现多选功能。
我的多重选择行为如下：
- “选择”复选框仅出现在悬停行的开头（未选择任何内容时）
- 选中一行后，所有其他复选框将变为永久可见。
- 切换时，中的复选框
TableHead将选择/取消选择所有行Table。
每行都有自己独特的个性id。
我通过挂钩维护一个Set被调用idsOfSelectedRows，useState以跟踪当前选中的所有行。
每个TableRow都有一个Checkbox像这样的
<Checkbox
className={
idsOfSelectedRows.size === 0 &&
styles.rowSelectionCheckboxStyle
}
onChange={() => handleRowSelectionCheckboxClick}
checked={idsOfSelectedRows.has(row.id)}
/>
和handleRowSelectionCheckboxClick看起来像这样
const handleRowSelectionCheckboxClick = event => {
const idOfClickedRow = event.target.attributes.getNamedItem("id").value;
//If the checkbox has just become checked then add it to the idOfSelectedRows Set, otherwise remove it.
setIdsOfSelectedRows(
event.target.checked
? new Set(idsOfSelectedRows.add(String(idOfClickedRow)))
: () => {
idsOfSelectedRows.delete(String(idOfClickedRow));
return new Set(idsOfSelectedRows);
}
);
};
我的问题是，单击行上的复选框无响应。我可以通过单击中的全选 来选择全部Checkbox，TableHead但是单击单个行中的复选框不会更改其状态？
这是完整的CodeSandbox再现了确切的问题。我需要怎么做才能使行中的复选框可切换？
0石0
像其他答案所建议的
这行代码：event.target.attributes.getNamedItem("id").value;不会提供所需的ID，因为没有传递ID，chekbox因此应进行如下更改：
<Checkbox
id={row.id}
onChange={handleRowSelectionCheckboxClick}
checked={idsOfSelectedRows.has(row.id)}
/>
然后，像这样检索ID：
const idOfClickedRow = event.target.attributes.id.value;
像其他答案所建议的
handleRowSelectionCheckboxClick 一样，如示例中所示更改 函数调用。如果您喜欢带有匿名功能的解决方案，则应添加 () ： onChange={() => handleRowSelectionCheckboxClick()}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
复选框不响应onChange-React
- 2
角度复选框不响应
- 3
复选框单击不响应
- 4
JavaScript 不响应复选框
- 5
触发 onChange 时获取复选框状态
- 6
复选框的初始状态？
- 7
复选框状态jQuery
- 8
更改复选框状态
- 9
复选框更改状态
- 10
复选框：通过Ajax更改复选框的状态
- 11
选中复选框时更改复选框颜色？
- 12
选中复选框时移动复选框标签
- 13
选中复选框时更改复选框颜色？
- 14
单击复选框时，如何知道复选框的状态
- 15
使用父类复选框时，如何让子类复选框更改状态？
- 16
保留由Rxjs生成的复选框的状态
- 17
扩展复选框的复选框
- 18
根据来自Ajax响应的值设置复选框状态
- 19
未选中子复选框时如何选中复选框主复选框？
- 20
反应：以编程方式更改检查状态时触发复选框输入的onChange吗？
- 21
引导复选框中的Onchange事件
- 22
函数未调用复选框的onChange
- 23
复选框onchange事件未触发
- 24
动态复选框onchange和javascript
- 25
禁用和启用Onchange复选框
- 26
从复选框onchange事件获取价值
- 27
触发更新面板时未保存复选框状态
- 28
滚动视图时，Android ListView失去复选框状态
- 29
Angular JS，过滤时请记住复选框状态
我来说两句