javascript - 从组件打开模态框

Question

我正在开发一个需要显示和隐藏模式的组件。

这就是我在 React 的 render 方法中所拥有的

    <div style={{visibility : this.state.displayModal}}>
      <p>Pop up: Bet Behind Settings</p>
    </div>
    <button onClick={this._openModal}>CLICK</button>

这是函数

  _openModal = () => {
    if (this.state.displayModal === 'hidden') {
      this.setState({
        displayModal : 'visible',
      })
    } else {
      this.setState({
        displayModal : 'hidden',
      })
    }
  }

我主要关心的是，如何以更优雅的方式设置状态，或者这应该是这样做的方法？

这里是完整的代码

constructor (props) {
    super(props);
    this.state = {
      displayModal : 'hidden',
    }
  }

  render () {

    return (
      <div style={{visibility : this.state.displayModal}}>
          <p>Pop up: Bet Behind Settings</p>
      </div>
      <button onClick={this._openModal}>CLICK</button>
    )
  }

  _openModal = () => {
    if (this.state.displayModal === 'hidden') {
      this.setState({
        displayModal : 'visible',
      })
    } else {
      this.setState({
        displayModal : 'hidden',
      })
    }
  }

那么，以 React 的方式弹出这个窗口应该是怎样的。

Answer 1

我认为这是一个很好的方法。但如果将 displayModel 设置为 bool 值，则会更加简洁:

_toggleModal = () => this.setState({displayModal: !this.state.displayModal})