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成为一个布尔值，它会更简洁：

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

Answer 2

在使用隐藏的复杂页面上会出现性能问题。尝试这样的事情;

render() {
  var returnIt;
  if (this.state.hide) {
    returnIt = null;
  } else {
    returnIt = (
      <div style={{visibility : this.state.displayModal}}>
      <p>Pop up: Bet Behind Settings</p>
      </div>
      <button onClick={this._openModal}>CLICK</button>      
    )
  }
  return (returnIt);
}

Answer 3

这只是个人观点，但我认为更好的用户体验应该只是用于打开模式;并且应该通过单击模态中的X（如果有）或单击模态外的任何位置来关闭模态。

那说如果你肯定需要按钮在两种状态之间切换，那么这样的事情呢？

constructor (props) {
    super(props);
    this.state = {
      displayModal : false
    }
  }

  render () {
    return (
      <div style={{visibility : this.state.displayModal === true ? 'visible' : 'hidden'}}>
          <p>Pop up: Bet Behind Settings</p>
      </div>
      <button onClick={this._toggleModal}>CLICK</button>
    )
  }

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

Answer 4

使用https://github.com/fckt/react-layer-stack，您可以这样做：

import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
return (
    <Cell {...props}>
        // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
            hideMe, // alias for `hide(modalId)`
            index } // useful to know to set zIndex, for example
            , e) => // access to the arguments (click event data in this example)
          <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
            <ConfirmationDialog
              title={ 'Delete' }
              message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
              confirmButton={ <Button type="primary">DELETE</Button> }
              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
              close={ hideMe } />
          </Modal> }
        </Layer>

        // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
        <LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
          <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
            <Icon type="trash" />
          </div> }
        </LayerContext>
    </Cell>)
// ...

从组件中打开模态

4 个答案: