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

【问题标题】：React open/close modal component onClick反应打开/关闭模态组件onClick
【发布时间】：2021-07-09 10:41:34
【问题描述】：

我目前有一个 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>
  );
}

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

【讨论】：