用第一个模态替换第二个模态

Question

首先检查我的react-bootstrap 代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleShow = (e) => {
    this.setState({ show: true });
  };

  handleClose = (e) => {
    this.setState({ show: false });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.handleShow}>Open Modal</button>
        <Modal
          size="lg"
          centered={true}
          show={this.state.show}
          onHide={this.handleClose}
          aria-labelledby="md-modal"
        >
          <Modal.Header>
            First Modal
            <button
              type="button"
              className="close"
              onClick={this.handleClose}
            >
             X
            </button>
          </Modal.Header>
          <Modal.Body>
            Please <Content clicked={this.handleClose} /> to show New Content
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}

class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleShow = (e) => {
    this.props.clicked();
    this.setState({ show: true });
  };

  handleClose = (e) => {
    this.setState({ show: false });
  };
  render() {
    return (
      <>
        <button onClick={this.handleShow}>Click Here</button>
        <Modal
          size="lg"
          centered={true}
          show={this.state.show}
          onHide={this.handleClose}
          aria-labelledby="md-modal"
        >
          <Modal.Header>
            Second Modal
            <button
              type="button"
              className="close"
              onClick={this.handleClose}
            >
              X
            </button>
          </Modal.Header>
          <Modal.Body>New Content</Modal.Body>
        </Modal>
      </>
    );
  }
}

我需要显示第二个模态，然后在单击第一个模态上的按钮后隐藏第一个模态。

您可以在此处查看演示： https://codesandbox.io/s/xenodochial-joliot-jl3qe

问题是当点击第一个模态的按钮时，两个模态都被隐藏了。

在这种情况下我可能需要使用 redux 吗？

Answer 1

所以我们需要跟踪 2 个 modals 的状态...唯一的区别是，由于 modal-2 可以从 modal-1 内部触发，我们需要确保在显示时关闭 modal-1模态2；

我在屏幕上显示了状态，以便更容易跟踪和理解；

以下是相关代码：

import React, { useState, useEffect } from "react";
import { Modal } from "react-bootstrap";
import "./styles.css";

const Modal1 = ({
  modalState,
  modalHeading,
  toggleModalOne,
  openTwoAndCloseOne
}) => {
  const [modalOpen, setModalOpen] = useState(modalState);

  useEffect(() => {
    setModalOpen(modalState);
  }, [modalState]);

  return (
    <Modal
      size="lg"
      centered={true}
      show={modalOpen}
      onHide={toggleModalOne}
      aria-labelledby="md-modal"
    >
      <Modal.Header>
        {modalHeading}
        <button type="button" className="close p-2" onClick={toggleModalOne}>
          close <i className={"mdi mdi-close"} />
        </button>
      </Modal.Header>
      <Modal.Body className="p-0">
        New Content
        <button type="button" onClick={openTwoAndCloseOne}>
          close first & open second
        </button>
      </Modal.Body>
    </Modal>
  );
};

const Modal2 = ({ modalState, modalHeading, toggleModalTwo }) => {
  const [modalOpen, setModalOpen] = useState(modalState);

  useEffect(() => {
    setModalOpen(modalState);
  }, [modalState]);

  return (
    <Modal
      size="lg"
      centered={true}
      show={modalOpen}
      onHide={toggleModalTwo}
      aria-labelledby="md-modal"
    >
      <Modal.Header>
        {modalHeading}
        <button type="button" className="close p-2" onClick={toggleModalTwo}>
          close <i className={"mdi mdi-close"} />
        </button>
      </Modal.Header>
      <Modal.Body className="p-0">
        ths is the Second modal and its New Content
      </Modal.Body>
    </Modal>
  );
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      showSecond: false
    };
  }

  toggleModalOne = (e) => {
    this.setState({ show: !this.state.show });
  };

  toggleModalTwo = (e) => {
    this.setState({ showSecond: !this.state.showSecond });
  };

  openTwoAndCloseOne = (e) => {
    this.setState({ showSecond: !this.state.showSecond });
    if (this.state.show) this.setState({ show: false });
  };

  render() {
    return (
      <div className="App">
        1st modal current show status: {this.state.show.toString()}
        <br />
        2nd modal current show status: {this.state.showSecond.toString()}
        <br />
        <button type="button" onClick={this.toggleModalOne}>
          change Modal1 status to {(!this.state.show).toString()}
        </button>
        <Modal1
          modalHeading={"this is modal heading for the first mofal"}
          modalState={this.state.show}
          toggleModalOne={this.toggleModalOne}
          openTwoAndCloseOne={this.openTwoAndCloseOne}
        />
        {/* 
        <button type="button" onClick={this.toggleModalTwo}>
          change Modal2 status to {(!this.state.showSecond).toString()}
        </button> */}
        <Modal2
          modalHeading={"this is modal heading for the second modal..."}
          modalState={this.state.showSecond}
          toggleModalTwo={this.toggleModalTwo}
        />
      </div>
    );
  }
}

完成工作example forked off your code-sandbox here