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方法移至标题或使其保持正常工作，则会显示

这是我的侧边栏：

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

1 个答案: