关于自定义反应模态组件的一个小问题

Question

我用reactjs创建了一个模态组件，它由模态掩码和模态主体组成。 现在我想单击模式蒙版，将整个模式组件隐藏起来。

尝试在模式蒙版dom上添加单击事件

class Modal extends React.Component {

  onClose = () => {
    console.log('close')
  }

  render () {
    return (
      <div>
        <div className="mocal-mask" onClick={this.onClose}>
        </div>
        <div className="modal-body">
        </div>
      </div>
    )
  }
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
}

onClick函数应为控制台“关闭”

Answer 1

您正在将一个函数this.onClose传递给onClick事件，但已将函数命名为onClick ，您需要定义一个名为onClose的函数

onClose = () => {
    console.log('close')
}

您基本上可以通过两种方式处理此问题

1. 来自父组件

    handleClose = () => { this.setState({modal: false}) } // in render { this.state.modal && <Modal onClose={this.handleClose}>} 

2. 您可以在模式本身中进行操作

    handleClose = () => { this.setState({modal: false}) } // in render return ( this.state.modal ? <div>...<div> : '' )