Question

当选中任何一个复选框时，我在启用按钮方面存在错误。目前，它不适用于第一次点击，而仅适用于第二次点击。取消选择复选框也会在第一次单击时起作用。我认为这与状态有关，但是我不太了解是什么导致了问题。

我尝试注释掉此行： SCOPES = ['https://www.googleapis.com/auth/calendar'] 并且它消除了问题，因此我确定它与useState有关。但是，这条线对我来说至关重要，因此我应该为此提出解决方案。我还尝试从相反的布尔值开始，问题仍然存在。

上组件：

checked.length > 0 ? setTaskBtnsEnabled(true) : setTaskBtnsEnabled(false);

上一个组件内的组件：

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);
  };

问题在于，第一次点击无效，并且未选中该复选框。没有错误消息进入控制台。

Answer 1

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

const [numberOfChecked, setNumberOfChecked] = useState(0)

然后添加一个useEffect，它将监视numberOfChecked的更改。在该钩子内，您可以执行

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

Answer 2

好的，我终于找到了导致此错误的原因...所以我认为该问题是由以下原因引起的：

复选框在组件层次结构中位于比启用按钮更低的级别。因此，每当第一次单击更改要启用的按钮的状态时，它都会“重新呈现”组件（包括复选框）。第二次单击并没有更改按钮状态，因为它已被启用，因此该单击实际上重新呈现了该复选框。

我将组件更改为相同级别，现在一切正常。希望有一天能对其他人有所帮助。：）

当选择带有反应钩子的任何复选框时，如何使启用按钮起作用？

2 个答案: