反应:控制活性状态的次要元素

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/[e-mail] 2x, /img/logos/[e-mail] 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

您非常接近解决方案，如果考虑到它，当您单击Hamburger菜单时会发生什么？此行为在哪里指定？

现在，如果您尝试为Navigation项目回答这些问题，则将找出问题所在。您正在正确地传递道具，尤其是handleClick，它将切换NavComponent的状态。

如果您进入Navigation组件，您可能会注意到您实际上永远不会调用该方法！组成组件的任何元素中都没有onClick。因此，您没有指定单击导航中的项目时会发生什么。

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

评论后，我认为提供小提琴是值得的。您会注意到我更改了您更新状态的方式(尽管不是问题(，当更新取决于先前状态时，最好通过函数更新状态。