Javascript 创建事件以隐藏/显示div onClick和onTouchEnd？

我有一个通知组件，如下所示：

当我单击bell按钮时，会弹出一个通知容器，如下所示：

我已经设置了该功能，当用户单击或触摸通知容器外部时，该框将关闭。但是，我不想直接向DOM添加事件。我宁愿利用React的优势。有人知道我如何使用SyntheticEvent而不是我目前使用的DOM事件吗

以下是我目前的代码：

import React from 'react';
import { PropTypes } from 'prop-types';
import './Notification.scss';

export default class Notification extends React.Component {
  constructor(props) {
    super(props);

    this.setNotificationWrapper = this.setNotificationWrapper.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);

    this.state = {
      visible: false,
      hasNotifications: false,
      expanded: false,
    };

    this.toggleNotificationContainer = this.toggleNotificationContainer
    .bind(this);
  }

  componentDidMount() {
    document.addEventListener('touchend', this.handleClickOutside);
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('touchend', this.handleClickOutside);
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  setNotificationWrapper(node) {
    this.notificationWrapper = node;
  }

  handleClickOutside(event) {
    if (this.notificationWrapper &&
      !this.notificationWrapper.contains(event.target)) {
      this.toggleNotificationContainer();
      event.preventDefault();
    }
  }

  toggleNotificationContainer() {
    this.setState({
      visible: !this.state.visible,
      hasNotifications: this.state.hasNotifications,
      expanded: !this.state.expanded,
    });
  }

  createNotificationItems(option, index) {
    this.state.hasNotifications = true;

    return (
      <li
        key={index}
        value={index}
      >
        {option.label}
      </li>
    );
  }

  render() {
    // set up the details to show in the list.
    let notificationOptions = null;
    let optionCount = 0;
    let toggleDivDetails = null;
    let buttonStyleName = '';
    let buttonText = null;

    if (this.props.notificationButtonIcon) {
      buttonStyleName = 'notificationButton';
    } else {
      buttonText = this.props.notificationButtonText;
      buttonStyleName = 'notificationButtonWithText';
    }

    toggleDivDetails = (
      <button
        onClick={this.toggleNotificationContainer}
        styleName={this.state.expanded ? 'expanded' : buttonStyleName}
        disabled={this.state.expanded}
      >
        {buttonText}
      </button>
    );

    if (this.props.options) {
      optionCount = this.props.options.length;
      notificationOptions = this.props.options.map((option, index) =>
      this.createNotificationItems(option, index));
    }

    if (optionCount === 0) {
      this.state.hasNotifications = false;
    }

    return (
      <div styleName="notificationBar">
        {toggleDivDetails}
        <span
          styleName={
            this.state.hasNotifications ? 'notificationCount' : 'hidden'
          }
        >
          {optionCount}
        </span>
        {
          this.state.visible &&
          <div
            styleName="notificationContainer"
            ref={this.setNotificationWrapper}
          >
            <h3 styleName="notificationHeading">Notifications</h3>
            <h4 styleName="notificationSubHeading">
              {optionCount} notifications
            </h4>
            <ul styleName="notificationList">
              {notificationOptions}
            </ul>
          </div>
        }
      </div>
    );
  }
}

Notification.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object),
  notificationButtonIcon: PropTypes.bool.isRequired,
  notificationButtonText: PropTypes.string.isRequired,
};

Notification.defaultProps = {
  options: [],
  NotificationButtonIcon: true,
  notificationButtonText: 'Toggle Notifications',
};

从“React”导入React；
从“属性类型”导入{PropTypes}；
导入“/Notification.scss”；
导出默认类通知扩展了React.Component{
建造师（道具）{
超级（道具）；
this.setNotificationWrapper=this.setNotificationWrapper.bind（this）；
this.handleClickOutside=this.handleClickOutside.bind（this）；
此.state={
可见：假，
哈斯：错，
扩展：错，
};
this.toggleNotificationContainer=this.toggleNotificationContainer
.约束（本）；
}
componentDidMount（）{
document.addEventListener（'touchend'，this.handleClickOutside）；
document.addEventListener（'mousedown'，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（'touchend'，this.handleclickout）；
document.removeEventListener（'mousedown'，this.handleclickout）；
}
setNotificationWrapper（节点）{
this.notificationWrapper=节点；
}
handleClickOutside（事件）{
如果（此为.notificationWrapper）&&
！this.notificationWrapper.contains（event.target））{
这个.toggleNotificationContainer（）；
event.preventDefault（）；
}
}
toggleNotificationContainer（）{
这是我的国家({
可见：！this.state.visible，
hasNotifications:this.state.hasNotifications，
展开：！this.state.expanded，
});
}
createNotificationItems（选项，索引）{
this.state.hasNotifications=true；
返回(

{option.label}

);
}
render（）{
//设置要在列表中显示的详细信息。
让notificationOptions=null；
让optionCount=0；
让toggleDivDetails=null；
让buttonStyleName=''；
让buttonText=null；
如果（此.道具.通知按钮图标）{
buttonStyleName='notificationButton'；
}否则{
buttonText=this.props.notificationButtonText；
buttonStyleName='notificationButtonWithText'；
}
toggleDivDetails=(
{buttonText}
);
if（this.props.options）{
optionCount=this.props.options.length；
notificationOptions=this.props.options.map（（选项，索引）=>
this.createNotificationItems（选项、索引））；
}
如果（optionCount==0）{
this.state.hasNotifications=false；
}
返回(
{toggleDivDetails}
{optionCount}
{
这个州可见&&
通知
{optionCount}通知

{通知选项}

}
);
}
}
Notification.propTypes={
选项：PropTypes.arrayOf（PropTypes.object），
NotificationButtonCon:PropTypes.bool.isRequired，
notificationButtonText:PropTypes.string.isRequired，
};
Notification.defaultProps={
选项：[]，
通知按钮尼康：是的，
notificationButtonText:“切换通知”，
};