从组件打开模态

Question

I am working on a component where I need to display and hide a modal.

this is what I have in the render method in React

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

and here is the function

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

the main concern I have, is, how to set the state in a more elegant way, or this should be the way to do it ?

here the full code

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',
      })
    }
  }

so, what should be the way to this pop up in a React way.

Answer 1

I think it's a good way to do it. But it will be more concise if you make displayModel a boolean:

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

Answer 2

On a complex page using hidden will be a performance issue. Try something like this instead;

 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

This is just a personal opinion, but I think a better UX would be that the button should only be used to open the modal; and the modal should be closed by either clicking the X in the modal (if there is) or when you click anywhere outside the modal.

That said if you definitely need the button to toggle between the 2 states, how about something like this?

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

Using https://github.com/fckt/react-layer-stack you can do like so:

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>)
// ...