Question

我正在尝试使用react-semantic-ui向用户显示模式。每当我将模态组件放在Navigation类下时，它就会很好地工作。不幸的是，每当我想在LoginRegistrationMenu组件中显示模式时，它都无法正常工作，甚至什么也没有显示！

export default class Navigation extends Component {
  constructor(props){
    super(props)
    this.state = {
      showMenu: false
    }
    this.showMenu = this.showMenu.bind(this)
    this.hideMenu = this.hideMenu.bind(this)
  }


  showMenu(){
    this.setState({
      showMenu: true
    })
    document.addEventListener('click', this.hideMenu)
  }

  hideMenu(){
    this.setState({
        showMenu: false
    })
    document.removeEventListener('click', this.hideMenu)
  }


  render() {
    return (
      <div className="navigation-wrapper">
        <div className="navigation">      
            <div>
              <Link to='/needs'>
                <div>
                  needs
                </div>
              </Link>
            <div className="login-register" onClick={this.showMenu}>
              <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
              {this.state.showMenu ? <LoginRegistrationMenu/> : null}
            </div>
        </div>
      </div>
    )
  }
}

class LoginRegistrationMenu extends Component {
  render () {
    return (
      <div>
        <div className="login-register-dialogue">
            <Modal
              trigger={<div>login</div>}
              header='Reminder!'
              content='Call Benjamin regarding the reports.'
              actions={['Snooze', { key: 'done', content: 'Done', positive: true }]}
            />
          <hr/>
          <a href="#">
            <div>sign up</div>
          </a>
        </div>
      </div>
    )
  }
}

如何更改上面的代码以使其正常工作？

Answer 1

考虑到您已导入所有内容，并正确添加了semantic.min.css。

我认为问题出在这里，

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
    {this.state.showMenu ? <LoginRegistrationMenu/> : null}  //problem line
</div>

您已在LoginRegistrationMenu内添加了div组件，并在该组件上编写了onClick事件。因此，在login div上单击将不会显示Modal，但会再次调用showMenu函数。您需要这样做，

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

{this.state.showMenu ? <LoginRegistrationMenu/> : null}  //Keep this outside of div

另一件事是，您不这样做，

document.addEventListener('click', this.hideMenu)

默认行为是，当Modal打开并在Modal之外单击时，它将关闭。

如果您想在此处切换功能，

<div className="login-register" onClick={this.showMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

我建议您这样做

<div className="login-register" onClick={this.toggleMenu}>
    <Icon name="user circle" size='big' color={this.state.showMenu? 'red': 'black'} />
</div>

您的toggleMenu函数应该是

toggleMenu(){
  this.setState({
    showMenu: !this.state.showMenu
  })
}

现在单击相同的Icon将切换菜单。

未显示React语义UI模态

1 个答案: