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

您非常接近解决方案，如果您考虑一下，单击X_tr.__init__菜单会发生什么？指定了这种行为在哪里？

现在，如果您尝试回答Hamburger项目的这些问题，您将找到问题所在。你正确传递道具，特别是Navigation，它将切换handleClick的状态。

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

我正在避免发布代码解决方案，因为我知道你可以自己解决它;）

在评论之后，我认为提供fiddle是值得的。您会注意到我更改了更新状态的方式（虽然这不是问题），但是当更新取决于先前的状态时，使用函数更新状态是一个好习惯。

React：控制活动状态的辅助元素

1 个答案: