我正在尝试每行打印 4 个复选框,其中这些复选框的行和值是动态出现的(行数可能会有所不同)
下面是我的jsx代码
matrix.map((row, index) => (
<TableRow key={index}>
<TableCell align="left">
{row.roleDescription}
</TableCell>
<TableCell align="right">
<FormControlLabel
control={
<Checkbox
onChange={(e) =>
setChecked({
...checked,
[e.target.name]: e.target.checked,
})
}
name={row.roleCode + `_readAccess`}
checked={(e) => checked[e.target.name]}
color="primary"
/>
}
label="Read"
/>
</TableCell>
<TableCell align="right">
<FormControlLabel
control={
<Checkbox
value={
row.writeAccess === null ? 0 : row.writeAccess
}
onChange={(e) => {}}
name="readAccess"
color="primary"
/>
}
label="Write"
/>
</TableCell>
<TableCell align="right">
<FormControlLabel
control={
<Checkbox
value={
row.checkerAccess === null
? 0
: row.checkerAccess
}
onChange={(e) =>
setMatrixForm({
...setMatrixForm,
checkerAccess: e.target.checked,
})
}
checked={
row.writeAccess &&
row.writeAccess !== "" &&
row.writeAccess === 1
? true
: false
}
name="checkerAccess"
color="primary"
/>
}
label="Checker"
/>
</TableCell>
<TableCell align="right">
<FormControlLabel
control={
<Checkbox
checked={
row.readAccess &&
row.readAccess !== "" &&
row.readAccess === 1
? true
: false
}
name="readAccess"
color="primary"
/>
}
label="Maker"
/>
</TableCell>
</TableRow>
))}
获取 matix
数据后,我正在设置状态变量 const[checked, setChecked] = useState([])
如下
.then((rec) => {
if (rec.status === 200) {
let chk = [];
rec.data.data.map((item, idx) => {
var obj = {};
obj[item.roleDescription + `_readAccess`] = item.readAccess;
chk.push(obj);
obj[item.roleDescription + `_writeAccess`] = item.writeAccess;
chk.push(obj);
obj[item.roleDescription + `_checkerAccess`] = item.checkerAccess;
chk.push(obj);
obj[item.roleDescription + `_makerAccess`] = item.makerAccess;
chk.push(obj);
});
setChecked(chk);
}
})
我尝试过的,是因为我动态改变的行我创建了 state
变量条目 as rowName + one of check box label
,所以当 onChange
在 CheckBox 上触发时它应该改变状态并检查框需要切换。
但是复选框没有被切换,
在 CODESANDBOX 中编辑已添加的样本 sample code
请帮忙。 谢谢
答案 0 :(得分:0)
请从 === 1 ? false : true
中删除 checked
,因为您在 onChange
中设置了 boolean
setChecked({
...checked,
[e.target.name]: e.target.checked
})
代码沙盒:https://codesandbox.io/s/wonderful-paper-lvcwe?file=/src/Demo.jsx
编辑 1
useEffect(() => {
console.log("checked called");
}, [checked]);