React阻止事件冒泡的正确打开方式

素颜马尾好姑娘i 2023-08-17 17:20 54阅读 0赞

需求：点击导航list按钮出现侧弹框，点击空白处弹框消失

问题：绑定空白处的点击事件到document上，但是非空白处的点击也会触发这个点击事件，在react中如何阻止事件冒泡？

解决方法：e.stopPropagation()并不奏效，react有专属的阻止事件冒泡方法，e.nativeEvent.stopImmediatePropagation()

示例：

/**
     * Created by sunzhuoyi on 17/3/6.
     */
    import React from 'react';
    import {connect} from 'react-redux';
    import {autobind} from 'core-decorators';
    import {pushState} from 'redux-router';
    import Store from '@comynli/store';
    import {Menu, Icon, Row, Col, Dropdown, Button, Affix} from 'antd';
    
    @connect(state => ({}),{pushState})
    
    export default class Common extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          current:'index',
          barDisplay:true
        }
      }
    
      componentDidMount(){
        document.onclick=this.handleBarDisplayShow;
      }
    
      @autobind
      handleClick(e) {
        this.setState({
          current: e.key,
        });
      }
    
      @autobind
      handleInLineClick(e) {
        this.setState({
          current: e.key,
        });
      }
    
      @autobind
      handleBarDisplay(e){
        e.nativeEvent.stopImmediatePropagation();
        this.setState({barDisplay:false})
      }
    
      @autobind
      handleBarDisplayShow(){
        e.nativeEvent.stopImmediatePropagation();
        this.setState({barDisplay:true})
      }
    
      render() {
      const SubMenu = Menu.SubMenu;
      const MenuItemGroup = Menu.ItemGroup;
        return(
          <div style={
        {width:'100%'}}>
            <Affix>
              <Menu onClick={
        this.handleClick}
                    mode="horizontal"
                    style={
        {lineHeight:'60px',paddingLeft:'20px'}}
              >
                {
                  this.state.barDisplay === true ? <Menu.Item key="bars" >
                    <Icon type="bars" onClick={e => this.handleBarDisplay(e)}/>
                  </Menu.Item> : <span></span>
                }
                <Menu.Item key="Poseidon">
                  <a href="/"><b>Poseidon</b></a>
                </Menu.Item>
              </Menu>
            </Affix>
            {
              this.state.barDisplay === false ?
                <Menu onClick={
        this.handleInLineClick}
                      style={
        {width: 240, paddingLeft: '20px', height: '1500px'}}
                      mode="inline"
                >
                   <Menu.Item key="Project">
                  <a href="/">Project</a>
                </Menu.Item>
                <Menu.Item key="ProjectTwo">
                  <a href="/">Project</a>
                </Menu> : <span></span>
            }
           
          </div>
        )
      }
    }

转载于:https://www.cnblogs.com/s-z-y/p/6519571.html