Question

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

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;

我已经尝试使用open字段作为模态并根据触发器是否设置来设置“显示”状态，但它最终永远不会关闭。看来，当我通过“登录”点击注册到登录组件时，它会引发一个关闭事件，我无法弄清楚原因。

Answer 1

解决方法：将closeOnDimmerClick={false}添加为模态道具。

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

语义UI React的Modal组件存在一些问题。肯定。

Repro步骤：

https://codesandbox.io/s/30n2v379r1
点击登录（左上角，也缩小以查看模态链接）
点击注册模式链接
点击模式的登录链接

实际：模态已关闭

预期：模态已打开，并显示注册表单

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

https://codesandbox.io/s/30n2v379r1

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

Answer 2

使用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'
      >

如何在显示不同组件时保持语义模式不被关闭？

2 个答案: