javascript - react : Secondary element controlling active state

Question

下面是我的组件。我试图通过更改事件状态来获取关闭滑出菜单的链接。汉堡包等已经做到了这一点，但当有人单击其中一个菜单项时，似乎无法弄清楚如何做到这一点。

import React from 'react';

const HamburgerToggle = (props) => (
    <button className={"hamburger hamburger--squeeze" + (props.active ? " is-active" : "")} onClick={props.clickHandler} type="button">
        <span className="hamburger-box">
            <span className="hamburger-inner"></span>
        </span>
    </button>
);

const Logo = () => (
    <a className="logo-link" href="/">
        <img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/logo@2x.png 2x, /img/logos/logo@3x.png 3x" alt="Logo" className="logo" />
    </a>
);

const Navigation = (props) => (
    <nav className={"navigation" + (props.active ? " slide-in" : "")}>
        <ul className="nav">
            <li className="single-item">
                <a href="/">Home</a> //toggle active state ^^
            </li>
            <li className="single-item">
                <a href="#">intem 2</a> //toggle active state as well
            </li>
            <li className="single-item">
                <a href="#">item 3</a> //toggle active state as well
            </li>
            <li className="single-item">
                <a href="#">item 4</a> //toggle active state as well
            </li>
        </ul>
    </nav>
);

export default class NavComponent extends React.Component {

    state = {active: false};

  handleClick(e){
      this.setState({active: !this.state.active});
      console.log(this.state.active);
  }

  render() {
      return (
            <div className="container">
                <HamburgerToggle active={this.state.active} clickHandler={this.handleClick.bind(this)} />
                <Logo />
                <Navigation active={this.state.active} clickHandler={this.handleClick.bind(this)} />
            </div>
        );
  }
}

Answer 1

你已经非常接近解决方案了，如果你想一下，当你点击汉堡菜单时会发生什么？此行为在哪里指定？

现在，如果您尝试回答 Navigation 项的这些问题，您就会发现问题出在哪里。您正确地传递了 props，尤其是 handleClick，它将切换 NavComponent 的状态。

如果您进入您的 Navigation 组件，您会发现您实际上从未调用该方法!组成组件的任何元素中都没有 onClick。因此，您没有指定单击导航中的项目时会发生什么。

我避免发布代码解决方案，因为我知道您可以自己修复它；)

发表评论后，我认为提供 fiddle 是值得的。 。您会注意到我更改了更新状态的方式(尽管这不是问题)，当更新取决于先前的状态时，使用函数更新状态是一个很好的做法。