javascript - 如何关闭Modal的React方式？

我有这个模式按钮，当我按下它时，会显示一个模式按钮。
如果要单击-外部-modal-box，我希望将其关闭，但是现在无论我单击外部还是在modal-box内部，模态都会关闭。在外部按modal-box时如何使模式框关闭反应方式？

https://codepen.io/anon/pen/MvVjOR

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      show: false
    }
  }
  openModal() {
    this.setState( prevState => (
    {show: !prevState.show}))
  }
  closeModal() {
    this.setState({show: false})
  }
  render() {
    return (
      <div>
      <button id='button' onClick={() => this.openModal()}>the modal button</button>
        {this.state.show && <div id='modal' onClick={() => this.closeModal()}>
        <div className="modal-box">
          <h1> I'm the AWESOME modal! </h1>
        </div>
      </div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

#modal {
  display: block;
  position: fixed;
  padding-top: 50px;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0 ,0 ,0 , 0.5);
}

.modal-box {
  z-index: 50;
  margin: auto;
  width: 80%;
  height: 200px;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

最佳答案

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      show: false
    }
  }
  openModal() {
    this.setState( prevState => (
    {show: !prevState.show}))
  }
  closeModal(e) {
    if(e.target.id === "modal") {
      this.setState({show: false})
    }
  }
  render() {
    return (
      <div>
      <button id='button' onClick={() => this.openModal()}>the modal button</button>
        {this.state.show && <div id='modal' onClick={(e) => this.closeModal(e)}>
        <div className="modal-box">
          <h1> I'm the AWESOME modal! </h1>
        </div>
      </div>}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

这是一个演示-https://codepen.io/anon/pen/dzmpqv

关于javascript - 如何关闭Modal的React方式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45781526/