当我使用 react 钩子的实现选中任何复选框时，启用按钮有什么问题？

Question

当选中任何复选框时，我在启用按钮时遇到了错误。目前，它不适用于第一次点击，而仅适用于第二次点击。取消选中复选框也适用于第一次单击。我认为这与状态有关，但我真的不明白是什么导致了问题。

我尝试注释掉这一行：checked.length > 0 ? setTaskBtnsEnabled(true) : setTaskBtnsEnabled(false);它消除了这个问题，所以我确定它与 useState 有关。但是，这条线对我来说至关重要，所以我应该为此想出一个解决方法。我也试图从相反的布尔值开始，问题仍然存在。

上部组件：

const checkedBoxes = () => {
var checkedOnes = [];
for (
var i = 0;
i < document.getElementsByClassName('count-checkboxes').length;
i++
) {
if (document.getElementsByClassName('count-checkboxes')[i].checked) {
checkedOnes.push(
document.getElementsByClassName('count-checkboxes')[i].parentNode
.id
);
}
}
return checkedOnes;
};
const [taskBtnsEnabled, setTaskBtnsEnabled] = useState(false);
const handleBtnsEnabling = event => {
var checked = checkedBoxes();
checked.length > 0 ? setTaskBtnsEnabled(true) : setTaskBtnsEnabled(false);
};

上一个组件中的组件：

<Button
disabled={!taskBtnsEnabled}
id="nappi"
>
OK
</Button>

问题是第一次单击不起作用，并且不选中复选框。控制台没有错误消息。

Answer 1

尝试创建一个每次单击复选框都会调用的函数。此函数将增加或减少状态变量的值。类似的东西

const [numberOfChecked, setNumberOfChecked] = useState(0)

然后添加一个将监视numberOfChecked更改的useEffect。在那个钩子里，你可以做你的

useEffect(() => {
setTaskBtnsEnabled(numberOfChecked > 0);
}, [numberOfChecked]);