当我使用反应钩子实现选择任何复选框时，启用按钮有啥问题？ [复制]

Posted 2023-03-05

【中文标题】当我使用反应钩子实现选择任何复选框时，启用按钮有啥问题？ [复制]

【英文标题】：What's wrong with enabling a button when any of checkboxes is selected with my implementation with react hooks? [duplicate]当我使用反应钩子实现选择任何复选框时，启用按钮有什么问题？ [复制]

【发布时间】：2020-01-30 09:39:20

【问题描述】：

I have a bug in enabling a button, when any of the checkboxes is selected.目前它在第一次点击时不起作用，但只在第二次点击时起作用。取消选中复选框也适用于第一次单击。我认为这与状态有关，但我并不真正了解导致问题的原因。

我尝试注释掉这一行： 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>

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

【参考方案1】：

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

const [numberOfChecked, setNumberOfChecked] = useState(0)

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

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