单击侧边栏时未调用 onClick

Question

在我的主容器中，布局有这段代码

import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';

class Layout extends Component {
    state = {
        showSideBar: true
    }

    sideBarToggleHandler = () => {
        console.log("test");       
    }

    render() {

        return (
            <div>
                <Header />
                <div>
                    <SideBar onClick={this.sideBarToggleHandler}/>
                    <main id="main">
                        {this.props.children}
                    </main>
                </div>
            </div>
        )
    }
}

export default Layout;

每当我点击边栏中的任何元素时，我都想进行控制台日志测试

出于某种原因，这并没有发生，但是如果我将 onClick 方法移动到 header 或主要它工作正常

这是我的侧边栏：

import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {


    }
    return (
        <div className={Classes.SideBar}>
            <Logo />
            <nav>
                <NavigationItems />
            </nav>
        </div>
    );
};

export default sideBar;

这是我的导航项：

import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome } from '@fortawesome/free-solid-svg-icons';
import { faFileAlt } from '@fortawesome/free-solid-svg-icons';
import { faChartLine } from '@fortawesome/free-solid-svg-icons';

library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);

const navigationItems = (props) => {
    return (
        <Aux>

            <p>CONSUMER</p>
            <ul className={classes.NavigationItems}>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</a></li>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</a></li>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</a></li>
            </ul>
            <div className={classes.Divider}></div>
            <div className={classes.ButtonPosition}>

                <button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
            </div>
            <div className={classes.Divider + ' ' + classes.DividerBottom}></div>
            <p className={classes.footer}>Micheal Alfa v 1.0.0</p>
            <p className={classes.footer}>Copyrights @ 2019 All Rights Reserved</p>
        </Aux>

    );
};

export default navigationItems;

有什么想法吗？谢谢

Answer 1

您没有对传递的 onClick 事件执行任何操作。你需要把它放在什么东西上，像这样：

const sideBar = (props) => (
  <div onClick={this.props.onClick} className={Classes.SideBar}>
    <Logo />
    <nav>
      <NavigationItems />
    </nav>
  </div>
);

export default sideBar;

这将在您单击 div 时触发该事件。有道理吗？

单击侧边栏时未调用 onClick

onClick not invoked when clicking on sidebar

javascript

jsx

reactjs

js-xlsx