gpt4 book ai didi

javascript - 如何使用 useState 切换所有复选框?

转载 作者:行者123 更新时间:2023-12-02 22:46:33 25 4
gpt4 key购买 nike

我有一个代码可以切换表格中的所有复选框,如下所示:

const tblData = dummyData;
const [ allToggled, setAllToggled ] = useState(false);
const [ toggled, setToggled ] = useState(false);

const handleToggleAll = allToggled => {
let selectAll = !allToggled;
setAllToggled(selectAll);
let toggledCopy = [];
tblData.forEach(function (e, index) {
toggledCopy.push(selectAll);
});
setToggled(toggledCopy);
}

const handleToggle = index => {

let toggledCopy = toggled;
setToggled[index] = toggled[index];
if( toggledCopy[index] === false ){
setAllToggled(false);
}
}

和 react 表部分:

        Header: state => (
<input
type="checkbox"
checked={allToggled}
onChange={() => handleToggleAll(allToggled)}
/>
),
Cell: row => (
<input
type="checkbox"
checked={toggled[row.index]}
/>
)

一切正常,直到我使用handleToggleAll。它将所有复选框切换为 true 状态,但是当我取消选中 handleToggleAll 时,我无法将它们设置回 true 中的任何一个单个复选框可以被选中。

最佳答案

这很奇怪 - 我检查并切换所有功能都工作得很好,但普通切换不起作用,而且它不能工作,因为你没有在代码中调用 setToggled...这应该工作得很好

const tblData = [1, 2, 3, 4];

const [ allToggled, setAllToggled ] = useState(false);
const [ toggled, setToggled ] = useState(
Array.from(new Array(tblData.length), () => false)
);

const handleToggleAll = allToggled => {
let selectAll = !allToggled;
setAllToggled(selectAll);
let toggledCopy = [];
tblData.forEach(function (e, index) {
toggledCopy.push(selectAll);
});
setToggled(toggledCopy);
}

const handleToggle = index => {
let toggledCopy = [...toggled];
toggledCopy[index] = !toggledCopy[index];
setToggled(toggledCopy);
if (toggledCopy.every(v => v)) {
setAllToggled(true);
} else if (allToggled) {
setAllToggled(false);
}
}

关于javascript - 如何使用 useState 切换所有复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58381492/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com