当前位置: 代码迷 >> JavaScript >> 如何在页面加载时显示模式组件?
  详细解决方案

如何在页面加载时显示模式组件?

热度:37   发布时间:2023-06-13 11:48:43.0

我正在制作一个HTML5游戏页面,并希望在用户加载页面时使我的登录表单成为模式页面。 我已将状态设置为true,并尝试将状态移动到app.js,但均无效

export default class Modal extends Component {
  state = { show: true };

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

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

  render() {
    return (
      <div className="modal">
        <section className="modal-main">
          <Login username={this.props.username} email={this.props.email} password={this.props.password} />
          <button onClick={this.hideModal}>close</button>
        </section>
      </div>
    );
  }
}

我已将模式导入到app.js中,但仍未加载。

您可以使用类似:

render() {
    return (
        <div className="modal">
            <section className="modal-main">
                {this.state.show &&
                    <Login username={this.props.username} email={this.props.email} password={this.props.password} />
                }
                <button onClick={this.hideModal}>close</button>
            </section>
        </div>
    );
}
  相关解决方案