当我调整 window 的大小时，ReactJS 按钮失去了功能

Question

这是header.component.js文件。 它在我的反应应用程序中呈现组件的 header。 我正在尝试制作包含“faBars”属性的 fontAwesome 图标：

 <Row onClick={onToggleMenu}>
        <Col>
          <FontAwesomeIcon
            icon={faBars}
            size="2x"
          />
        </Col>
      </Row>

即使 window 被调整大小，也可以打开和关闭侧边栏。 我遇到的问题是，虽然图标是响应式的，但一旦 window 调整大小，它就会失去其功能。

这是整个组件：

import React  from 'react';

import clsx from 'clsx';

import { connect } from 'react-redux';

import { setSidebarToggleMobile } from '../redux/reducers/theme.reducer';

import HeaderUserbox from '../components/header-user-box.component';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faBell } from '@fortawesome/free-regular-svg-icons';

import { faBars } from '@fortawesome/free-solid-svg-icons';

import { Badge, Row, Col } from 'reactstrap';


// import redux and reducers
import store from "../redux/store"
import { SET_SIDEBAR_TOGGLE } from "../redux/reducers/theme.reducer"

const Header = (props) => {

  const { headerShadow, headerBgTransparent } = props;


  /** Metodo que ejecuta el toggle del sideber*/
  const onToggleMenu = () => {
    const isActive = store.getState().sidebar.sidebarToggle;
    console.log("isActive: " + isActive);
  
    //Original statement:
    store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: !isActive });
    //console.log("Store.dispatch: " , store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: !isActive }));
  }


  return (
    <>
      <div
        className={clsx('app-header', {
          'app-header--shadow': headerShadow,
          'app-header--opacity-bg': headerBgTransparent
        })}>          

            <Row onClick={onToggleMenu}>
              <Col>
                <FontAwesomeIcon
                  icon={faBars}
                  size="2x"
                />
              </Col>
            </Row>

        <div className="app-header--pane"></div>
        <div className="app-header--pane">        
          <aside className="position-relative" style={{ marginLeft: '-20%' }}>
            <Badge
              color='success'
              pill
              style={{
                zIndex: 1,
                borderRadius: '8px',
                height: '12px',
                width: '5px',
                padding: '6px',
                marginBottom: '40px',
                marginRight: '-14px',
                border: '1px solid white',
                boxShadow: '2.5px 2px'
              }}
            >
              {' '}
            </Badge>
          </aside>
          <FontAwesomeIcon
            icon={faBell}
            size='4x'
            style={
              {
                borderRadius: '8px',
                zIndex: -1,
                padding: '5%',
                margin: '3%',
                width: '50px',
                backgroundColor: '#d1ffd5',
                color: '#03ac13'
              }}
          />
          <HeaderUserbox />
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state) => ({
  headerShadow: state.sidebar.headerShadow,
  headerBgTransparent: state.sidebar.headerBgTransparent,
  sidebarToggleMobile: state.sidebar.sidebarToggleMobile
});

const mapDispatchToProps = (dispatch) => ({
  setSidebarToggleMobile: (enable) => dispatch(setSidebarToggleMobile(enable))
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

Answer 1

你好尝试阻止默认事件有时它是固定的

 const onToggleMenu = (event) => { event.preventDefault(); const isActive = store.getState().sidebar.sidebarToggle; console.log("isActive: " + isActive); //Original statement: store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: ;isActive }). //console.log("Store:dispatch, ". store:dispatch({ type, SET_SIDEBAR_TOGGLE: sidebarToggle; !isActive })); }

你可以调用你的 function

 <Row onClick={(e)=>onToggleMenu(e)}>