Question

我目前有一个 DashboardTableSection 组件，其中有一个数据表。表格内有一个按钮，如果我单击该按钮，则会打开一个模式。模态基于它自己的 DashboardModalSection 组件。目前我有：

const DashboardTableSection = () => {
  const [showModal, setShowModal] = useState(false);

  function addItem() {
    setShowModal(true);
  }
return (
    <div>
      <MDBDataTable
        data={data}
        striped
        bordered
        small
        info={false}
        searching={false}
        proSelect
      ></MDBDataTable>
      {showModal && <DashboardModalSection title="Create Group" toggle={showModal} />}
    </div>
  );
}

一旦 addItem() 被调用，showModal 的状态就会更改为 true，并且应该显示模态。我将“切换”道具传递到 DashboardModalSection 组件中以控制组件的状态。在 DashboardModalSection 中，道具被传递到模态的“isOpen”属性中，如下所示：

const DashboardModalSection = (props) => {
  const [toggle, setToggle] = useState(props.toggle);

  return (
    <MDBContainer>
      <MDBModal centered isOpen={toggle}>
        <MDBModalFooter>
          <MDBBtn onClick={() => setToggle(!toggle)} color="danger">Close</MDBBtn>
        </MDBModalFooter>
      </MDBModal>
    </MDBContainer>
  );
}

所以这个想法是一旦切换道具被传递到 DashboardModalSection 它就会直接传递到状态，基本上控制何时显示模态以及何时隐藏它。然而，问题是这只有效一次。一旦关闭按钮上的 onClick 被调用，组件就会卸载并且状态返回到 false。如果我再调用 addItem() 方法，则状态不再更新，因此模态保持隐藏。有人知道如何解决这个问题吗？

Answer 1

您已经为价值创造了第二个真相来源。它最初由 DashboardTableSection 中的 showModal 值控制……但是随后，您在 DashboardModalSection 的状态中捕获该值并将该副本向下传递给 MDBBtn。这样做只会混淆事物并导致您所看到的问题。

解决方案是删除 DashboardModalSection 中的 useState，而不是将 showModal 发送到 DashboardModalSection，给它 setShowModal 并让 MDBBtn setShowModal(false) 关闭。不要担心在那里将它设置为 true，因为这已经在 DashboardTableSection 中以 addItem 方式备份。

反应打开/关闭模态组件 onClick

1 个答案: