Откройте новый модал в модале и закройте предыдущий - PullRequest
Новая
       12

Откройте новый модал в модале и закройте предыдущий

0 голосов
/ 24 марта 2020

В моем проекте реакции у меня есть следующее содержимое в моем приложении. js:

Например: 

<GameStats />
<UserStats />

UserStats. js и GameStats. js будут открыты, когда в моем сокете будут данные.

В моделях GameStats. js есть список пользователей. и когда вы щелкнете по имени пользователя, то откроется UserStats. js Модальный. Теперь я хочу знать, как можно закрыть GameStats. js модальный когда UserStats. js модальный будет открыт ? я не могу использовать setState, потому что компоненты являются независимыми.

есть ли способ сделать это с помощью redux?

Вот мой пример кода:

GameStats. js: 

class GameStats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
      this.setState({ show: true });
  }
  handleClose() {
      this.setState({ show: false});
  }
  componentDidMount() {
    Socket.on("message", data => this.example(data));
  }
  handleInfo() {
    //Send Request to Socket. then the response will be open in UserStats.js modal
    //socket.emit('userInfo', 1);
  }
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">GameStats</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <a href="#" onclick={() => this.handleInfo()}>
              Leon
            </a>
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

UserStats. js: 

class UserStats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
      this.setState({ show: true });
  }
  handleClose() {
      this.setState({ show: false});
  }
componentDidMount() {
    socket.on("userInfo", data => this.example(data));
}
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">UserStats</Modal.Title>
          </Modal.Header>
          <Modal.Body>
                  Contents
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

Кроме того, это мой index. js content: 

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                         <UserStats />
                         <GameStats />
                        <Route exact path="/" component={Game} />
                </div>
            </Router>
        );
    }
}
...