单击 "hamburger menu" 并在 React 中打开侧边导航？

Question

我是新手。试图找出如何绑定点击事件并使其在两个地方切换 class 。我该如何实现？

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

导航：

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

而边menu/header：

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" 方法告诉 "toggle" 汉堡菜单和 header/side-menu？因为 handleClick 在另一个范围内（导航），我不希望它在 Header class.

内做同样的事情

Answer 1

如果你想让两个组件共享同一个事件/状态，你需要做 react 文档中提到的提升状态

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

一旦你触发了传给Navigation的function，它会告诉App.js "hey, I just did this thing you told me to do, you handle it from here." App.js会说"okay, updating the state for myself so both you and Header can get what you need." App.js 将切换其状态，并将其作为道具传递给 Header 和 Navigation。

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

单击 "hamburger menu" 并在 React 中打开侧边导航？

Click "hamburger menu" and open a side nav in React?

class

toggle

reactjs