javascript - 显示不同组件时如何防止语义用户界面关闭？

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;

注册.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;

登录.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;

我尝试使用模态的开放字段并根据触发器是否已关闭设置“显示”状态，但它最终永远不会关闭。似乎当我通过“登录”单击从注册到登录组件时，它将引发关闭事件，但我不明白为什么。

Answer 1

解决方法:添加 closeOnDimmerClick={false} 作为 Modal 属性。

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

Semantic UI React 的 Modal 组件存在一些问题。当然。

重现步骤:

1. https://codesandbox.io/s/30n2v379r1
2. 通过点击“登录”打开模态框(左上角，也可以缩小以查看模态框的链接)
3. 点击模式的注册链接
4. 点击模式的登录链接

实际:模式已关闭

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

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

PS:避免这种自动关闭行为的另一种方法是使两个表单标记或多或少相似:例如，从注册表单中删除前两个输入，使其看起来与登录表单完全相同(当然，它不是主题启动器的解决方案，仅供引用)，在 https://codesandbox.io/s/30n2v379r1 上的注册组件中有一些评论

更新:SUIR 存储库上的问题 https://github.com/Semantic-Org/Semantic-UI-React/issues/2888