onClick не вызывается при нажатии на боковой панели - PullRequest
Новая
       16

onClick не вызывается при нажатии на боковой панели

0 голосов
/ 30 мая 2019

В моем основном контейнере макет имеет этот код 

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;

Есть идеи?Спасибо

1 Ответ

1 голос
/ 30 мая 2019

Вы ничего не делаете с переданным событием onClick.Вам нужно поместить это на что-то вроде этого: 

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

export default sideBar;

Это вызовет это событие, когда вы нажмете на div.Имеет смысл?

...