Javascript 当表格中没有 Select 时禁用继续按钮

发布于06月16日

我有一个来自后端的列表.此列表显示用户的发票.如果用户没有 Select 至少一张发票，我希望该按钮被禁用.如果用户 Select 了至少一张发票，我希望该按钮处于活动状态.但是发票和按钮在不同的组件中.

payment-table.js

这里IDE这样警告我；'setEnabledButton' is assigned a value but never used.

  const [selectedItems, setSelectedItems] = useState([]);

  const [enabledButton, setEnabledButton] = useState();

  useEffect(() => {
    if (selectedItems.length > 0) {
      setEnabledButton = true;
    } else {
      setEnabledButton = false;
    }
  }, [selectedItems]);

policy-payment-info.js

<div className={hiddenControlButtonClass}>
  <AS.Button variant="outlined" onClick={handlePayment} enabledButton>
    {t('policy-payment-info.continue')}
  </AS.Button>
</div>

推荐答案

首先为useState函数设置默认状态:

  const [enabledButton, setEnabledButton] = useState(false);

在此之后，需要通过添加()执行seState

这样地:

 useEffect(() => {
    if (selectedItems.length > 0) {
      setEnabledButton(true);
    } else {
      setEnabledButton(false);
    }
  }, [selectedItems]);

然后，您需要使用此状态来启用或禁用按钮:

<div className={hiddenControlButtonClass}>
  <AS.Button variant="outlined" onClick={handlePayment} disabled={enabledButton}>
    {t('policy-payment-info.continue')}
  </AS.Button>
</div>