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

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

来自父组件

handleClose = () => {
  this.setState({modal: false})
}

//  in render 

{ this.state.modal && <Modal onClose={this.handleClose}>}

您可以在模式本身中完成

handleClose = () => {
  this.setState({modal: false})
}

// in render 

 return (
    this.state.modal ? <div>...<div> : ''
)

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

1 个答案: