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

Question

这是header.component.js文件。它在我的react应用程序中呈现组件的头部。我正在尝试制作包含"faBars"；属性：

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

打开和关闭侧边栏，即使窗口被调整了大小。我遇到的问题是，尽管图标是有响应的，但一旦窗口调整大小，它就会失去功能。

这是整个组件：

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

Hello尝试防止默认事件，有时它会修复

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

你可以调用你的功能

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