从另一个组件更改类组件状态答案

【问题标题】：Change class component state from another component从另一个组件更改类组件状态
【发布时间】：2022-01-11 18:35:54
【问题描述】：

我迈出了反应的第一步。我正在开发一个 gatsbyjs 网站，但我被困在我的导航组件上。

听完之后，我开始创建一个名为 Burger 的类组件来显示/隐藏导航……设置道具、状态和绑定……现在没有问题。

我在另一个文件中放置了我的导航功能组件，使用 gatsbyjs“链接”组件来管理链接。

我想要做的是在我点击链接时更改“汉堡”组件的状态。

所以我尝试使用 onClick 事件：

onClick={() => props.handleClick()}

它不起作用，错误是：props.handleClick 不是函数。

我做错了什么？

谢谢

// Burger.js
class Burger extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
    this.state.isOpen
      ? document.body.classList.remove("nav-open")
      : document.body.classList.add("nav-open");
  };

  render() {
    const burgerState = this.state.isOpen ? open : "";

    return (
      <button className={`${burger} ${burgerState}`} onClick={this.handleClick}>
        <span className={burger__label}>Menu</span>
        <span className={burger__line}></span>
        <span className={burger__line}></span>
        <span className={burger__line}></span>
      </button>
    );
  }
}

// Nav.js
const Nav = (props) => {

  return (
    <div className={nav__overlay}>
      <div className={nav__wrap}>
        <nav className={nav__primary}>
          <ul>
            <li>
              <Link to='/' activeClassName={active} title='Home' onClick={() => props.handleClick()}>
                Home
              </Link>
            </li>
            <li>
              <Link to='/about' activeClassName={active} title='About' onClick={() => props.handleClick()}>
                About
              </Link>
            </li>
            <li>
              <Link to='/contact' activeClassName={active} title='Contact' onClick={() => props.handleClick()}>
                Contact
              </Link>
            </li>
            <li>
              <Link to='/blog' activeClassName={active} title='Blog' onClick={() => props.handleClick()}>
                Blog
              </Link>
            </li>
          </ul>
        </nav>
        <div className='contact'>
          <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

【问题讨论】：

你了解什么是道具吗？您可能想查找一些说明如何使用它们的教程。

标签： javascript reactjs

【解决方案1】：

是 Burger 组件还是 Nav 组件出错？目前尚不清楚 Nav.js 或 Burger.js 如何相互关联或交互。另一件事是 React 不关心 nav-open 类是否在主体上，所以如果连接正确，该函数应该是可调用的。

鉴于您提供的错误 - onClick={() => props.handleClick()} - 看起来此代码位于导航组件中。无论您在哪里渲染导航，都需要将handleClick 作为道具传递，例如<Nav handleClick={myFunction} />.

您可以在此处阅读有关道具及其工作原理的更多信息：https://reactjs.org/docs/components-and-props.html

【讨论】：