如何以 React 方式关闭 Modal？

Question

我有这个模态按钮，当我按下它时，会显示一个模态按钮。 如果单击 - 外部 - 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>

Answer 1

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