如何在显示不同组件时保持 semantic-ui 模态不关闭？

Question

我正在尝试使用模式进行身份验证（登录和注册）。到目前为止，我已经能够让它正确显示并且可以从登录组件切换到注册组件，但由于某种原因，在尝试从注册切换回登录后模式将关闭。我有一个包含模态触发器的 header。到目前为止，这是我的代码：

Header.js

import React, { Component } from "react";
import Login from "./Login";
import Register from "./Register";
import logo from "../assets/logo.png"
import { Modal } from "semantic-ui-react";

class Header extends Component {
  constructor(props){
super(props);
this.state = { login: true, header: "Login"}
this.handleRegister = this.handleRegister.bind(this);


  this.handleLogin = this.handleLogin.bind(this);
  }

  handleRegister = () => {
    this.setState({ login: false,
                    header: "Register"});
  }

  handleLogin = () => {
    this.setState({ login: true,
                    header: "Login"});
  }

  renderModal () {
    const showLogin = this.state.login ? (<Login handleRegister={this.handleRegister} />) : (<Register handleLogin={this.handleLogin} />);
    return (
      <Modal closeIcon onClose={this.handleLogin} size="tiny" trigger={<a className="item">Login</a>}>
        <Modal.Header style={{backgroundColor: "#005ce6", color:"white"}}>{this.state.header}</Modal.Header>
        <Modal.Content>
          {showLogin}
        </Modal.Content>
      </Modal>
    )
  }
render() {
    return (
      <div>
        <div className="ui menu hover" style={{ padding: 0}}>

          <div className="right menu">
            {this.renderModal()}
          </div>
        </div>
    </div>


    )
  }
}

export default Header;

Register.js

import React, { Component } from 'react';

class Register extends Component {
  constructor(props){
    super(props)
    this.handleLogin = this.props.handleLogin.bind(this);
  }

  render() {
    return (
      <div>
        <div>
            <form action="/auth/register" method="post" className="ui form">
            <div className="field">
              <label>First Name</label>
              <input type="text" placeholder="First Name" name="firstName"/>
            </div>
            <div className="field">
              <label>Last Name</label>
              <input type="text" placeholder="Last Name" name="lastName"/>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="text" placeholder="Email" name="email"/>
            </div>
            <div className="field">
              <label>Password</label>
              <input type="password" placeholder="Password" name="password"/>
            </div>
            <button type="submit" className="ui button">Submit</button>
            </form>
            <div style={{paddingTop:20}}>
              <div>Already have account? Please <a onClick={this.handleLogin}>Login</a></div>
            </div>
        </div>
      </div>
    )
  }
}

export default Register;

Login.js

import React, { Component } from 'react'

class Login extends Component {
  constructor(props){
    super(props)
    this.handleRegister = this.props.handleRegister.bind(this);
  }
  render(){
    return (
      <div>
          <form action="/auth/login" method="post" className="ui form">
            <div className="field">
              <label>Email</label>
              <input type="text" placeholder="Email" name="email"/>
            </div>
            <div className="field">
              <label>Password</label>
              <input type="password" placeholder="Password" name="password"/>
            </div>
            <button type="submit" className="ui button">Submit</button>
          </form>
          <div style={{paddingTop:20}}>
            <div>Don't have an account? Please <a onClick={this.handleRegister}>Register</a></div>
          </div>
      </div>

    )
  }
}
export default Login;

我已经尝试使用模式的开放字段并设置 "show" 状态，具体取决于触发器是否被触发，但它最终永远不会关闭。似乎当我通过 "Login" 单击从注册到登录组件时，它会引发一个关闭事件，我不明白为什么。

Answer 1

使用 open 属性，它是布尔值，如果为 true 将使您的模态保持打开状态。 demo link to keep modal open

<Modal
        trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
        open={this.state.modalOpen}
        onClose={this.handleClose}
        basic
        size='small'
      >

Answer 2

解决方法：添加 closeOnDimmerClick={false} 作为模态属性。

来源：https://github.com/Semantic-Org/Semantic-UI-React/issues/2493#issuecomment-362972834

Semantic UI React 的模态组件存在一些问题。绝对。

重现步骤：

https://codesandbox.io/s/30n2v379r1
通过单击“登录”打开模态（左上角，同时缩小以查看模态的 links）
点击模态的注册link
点击模态的登录link

实际：模态已关闭

预期：打开模式并显示注册表单

IMO，更改标记后（注册表有更多输入）导航 link 有新坐标，该坐标超出模态的初始坐标范围。因此，现在单击此 link 被视为单击模态之外的某处。

PS：避免这种自动关闭行为的另一种方法是使两个表单标记或多或少相似：例如，从注册表单中删除前两个输入，使其看起来与登录表单完全一样（当然，这不是 topic-starter 的解决方案，仅供参考），https://codesandbox.io/s/30n2v379r1

上的注册组件中有一些评论

更新：SUIR 回购问题 https://github.com/Semantic-Org/Semantic-UI-React/issues/2888

如何在显示不同组件时保持 semantic-ui 模态不关闭？

How to keep semantic-ui modal from closing when displaying different components?

javascript

reactjs

semantic-ui

semantic-ui-react