如何减少模态使用 useState 的次数？

Question

我有一个关于在一个 useState 中使用多个状态的问题。我有两个按钮（大约 10 个），单击按钮后，它会显示一些典型信息，仅适用于一个按钮（选择）。所以每个按钮的状态必须是单独的。有什么方法可以将所有按钮减少到一个 useState 吗？我现在有：

  const [showConfirmModalGoals, setShowConfirmModalGoals] = useState(false);

  const [showConfirmModalBallPos, setShowConfirmModalBallPos] = useState(false);

  

  const showModalForGoals = () => {

    setShowConfirmModalGoals(true);

  };

  

  const hideModalForGoals = () => {

    setShowConfirmModalGoals(false);

  };

  const showModalForBallPos = () => {

    setShowConfirmModalBallPos(true);

  };

  

  const hideModalForBallPos = () => {

    setShowConfirmModalBallPos(false);

  };

return(

<Modal show={showConfirmModalGoals} ... > GOALS </Modal>

<Button onClick={showModalForGoals} />

<Modal show={showConfirmModalBallPos} ... > Ball position</Modal>

<Button onClick={showModalForBallPos} />

);

所以如果我要 10 个不同内容的按钮，我需要这些按钮有 10 个不同的状态。

Answer 1

不！所有按钮只需要一个模式。const&nbsp;[showModal,&nbsp;setShowModal]&nbsp;=&nbsp;useState(false);然后，对于每个按钮：<Button&nbsp;onClick={()&nbsp;=>&nbsp;setShowModal(true)}&nbsp;/>然后您将根据单击的按钮更改模态框的内容（页眉、正文和页脚）。

Answer 2

您可以为所有状态使用一个对象。const [showConfirmModals, setShowConfirmModals] = useState({&nbsp; showConfirmModalGoals: false,&nbsp; showConfirmModalBallPos: false,});// ...setShowConfirmModals({&nbsp; ...showConfirmModals,&nbsp; showConfirmModalGoals: true})