可重用模态组件 React Typescript

Question

我有一个组件，里面有一个按钮，就像这样 -

<Button variant="primary" disabled={checkAccepted} onClick={openModal}>Send</Button>

我希望此按钮在处于活动状态时在单击时打开一个模式。我不确定该怎么做，并且一直在摆弄道具，但似乎无法弄清楚。我还希望模态可重用，以便任何内容都可以在模态中传递 body.I 我在想如何从我的 openModal 函数中打开模态？我试过这样退货 -

const openModal = () => {

return (
            <Modal>
                <ModalBody>*Pass in swappable content here*</ModalBody>
            </Modal>
        )
}

但这似乎不起作用。我确定我错过了什么。

Answer 1

您应该将触发模态的函数作为 prop 传递给您的 <Button /> 组件。然后，在您的组件中，您想要添加 onClick 事件。您不能将 onClick 事件设置为 <Button />。它会将 onClick 视为传递给 <Button /> 的道具。在 <Button /> 中，您可以将 onClick 事件设置为实际的 <button> 元素，并使用作为该事件的道具传入的函数。

您可以使用状态来跟踪模式按钮何时被单击。您的功能可能如下所示：（我在这里使用基于 class 的组件，但您可以使用功能组件做同样的事情）

buttonClickedHandler = () => {
    this.setState({isModalButtonClicked: !this.state.isModalButtonClicked});
}

然后，就可以设置Modal组件了，

<Modal isShow={this.state.isModalButtonClicked} modalButton={this.buttonClickedHandler}>
   <div> ...set contents of modal</div>
</Modal>

<button onClick={this.buttonClickedHandler}>Show Modal</button>

所以，在 Modal 组件中，你可以有这样的东西：

<React.Fragment>
    <Backdrop showModal={this.props.isShow} clicked={this.props.modalButton}/>
    {this.props.children}
</React.Fragment>

背景基本上是灰色背景。您还可以设置 onClick 事件以在单击背景时监听。

Answer 2

您不能 return 来自事件处理程序的组件。在 React 中处理事件的方式几乎总是改变触发重新渲染的应用程序的状态。在您的情况下，您需要跟踪模态的 open 状态。

这可以通过受控方式（您自己跟踪打开状态并将其作为道具传递给您的 <Modal> 组件）或以不受控方式（<Modal>组件管理 open 状态本身）。第二种方法要求您提供例如呈现给您的 Modal 组件的元素，充当触发器：

const MyModal = ({ children, trigger }) => {
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);

  return (
    <div>
      {React.cloneElement(trigger, { onClick: toggle })}
      <Modal isOpen={modal} toggle={toggle}>
        <ModalBody>{children}</ModalBody>
      </Modal>
    </div>
  );
};

然后就可以这样使用了:

<MyModal trigger={<Button variant="primary">Send</Button>}>
    <p>This is the content.</p>
</MyModal>

或者您可以以受控的方式实施它。这更灵活，因为它允许您在任何地方呈现触发元素：

const MyModal = ({ children, isOpen, toggle }) => (
  <div>
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalBody>{children}</ModalBody>
    </Modal>
  </div>
);

用法示例：

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div className="App">
      <Button variant="primary" onClick={toggle}>
        Send
      </Button>
      <MyModal isOpen={isOpen} toggle={toggle}>
        <p>This is the content.</p>
      </MyModal>
    </div>
  );
}

可重用模态组件 React Typescript

Reusable Modal Component React Typescript

typescript

bootstrap-modal

reactjs

bootstrap-4

reactstrap