单击“汉堡菜单”并在 React 中打开侧导航？答案

【问题标题】：Click "hamburger menu" and open a side nav in React?单击“汉堡菜单”并在 React 中打开侧导航？
【发布时间】：2017-08-22 20:58:42
【问题描述】：

我是新来的反应。试图弄清楚如何绑定点击事件并让它在两个地方切换一个类。我如何做到这一点？

这是我到目前为止所做的。

导航：

import React from 'react';
import { css } from 'glamor';
import { container } from '../contents/grid'

export default class Navigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggled: true };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggled: !prevState.isToggled
        }));
    }

    showHeader() {
        this.refs.navigation.show();
    }

    render() {
        return (
            <nav className={nav} {...container}>
                <ul {...hamburger} className={this.state.isToggled ? "" : "active"} onClick={this.handleClick}>
                    <li>
                    </li>
                </ul>
            </nav>
        )
    }
}

还有侧面菜单/标题：

import React from 'react';
import { Link } from 'react-router-dom';
import { css } from 'glamor';
import { header, nav, navUL } from '../contents/navigation';

export default class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    show() {
        this.setState({
            isToggled: true
        });
    }

    render() {
        return (
            <header {...header}>
                <nav {...nav}>
                    <ul {...navUL} className={styleUl}>
                        <li>
                            <Link to='/'>Robin Savemark</Link>
                        </li>
                        <li>
                            <Link to='/experience'>Erfarenhet</Link>
                        </li>
                        <li>
                            <Link to='/education'>Utbildning</Link>
                        </li>
                        <li>
                            <Link to='/project'>Projekt</Link>
                        </li>
                        <li>
                            <Link to='/knowledge'>Kunskaper</Link>
                        </li>
                        <li>
                            <Link to='/contact'>Kontakt</Link>
                        </li>
                    </ul>
                </nav>
            </header>
        )
    }
}

以及我只渲染每个组件的应用程序：

import React from 'react';
import Navigation from './Navigation';
import Header from './Header';
import Main from './Main';

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation />
                <Header ref="Navigation" />
                <Main />
            </div>
        )
    }
}

如何告诉我的“handleClick”方法“切换”汉堡菜单和标题/侧面菜单？因为 handleClick 在另一个范围内（导航），我不希望它在 Header 类中做同样的事情。

【问题讨论】：

标签： reactjs class toggle

【解决方案1】：

如果您希望两个组件共享相同的事件/状态，则需要执行 react 文档中所说的提升状态

您可以随意构建它，但现在，您的 App.js 持有您感兴趣的两个组件，但没有自己的 state。因此，这两个组件无法共享状态。您想要做的是在App.js 中有一个事件处理程序，然后您将其作为道具传递给感兴趣的组件，并在其自己的状态中包含一个toggle 类。

一旦你触发了传递给Navigation的function，它会告诉App.js“嘿，我刚刚做了你让我做的事情，你从这里处理。” App.js 会说“好的，为我自己更新状态，这样你和 Header 都能得到你需要的东西。” App.js 将切换其状态，并将其作为道具传递给Header 和Navigation。

此处的 React 文档参考：https://facebook.github.io/react/docs/lifting-state-up.html#lifting-state-up

【讨论】：