Reactjs 从子组件响应更新组件状态

我有以下组成部分：

import React from 'react';

import Header from './header.jsx';
import Footer from './footer.jsx';

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }
  toggleWrapper() {
    this.setState({open: !true});
  }
  render () {
    const toggle = this.state.open ? 'open' : '';
    return (
        <section className={"wrapper " + toggle}>
            <div className="inner-wrapper">
                <Header action={this.toggleWrapper.bind(this)}/>
                    {this.props.children}
                <Footer />
            </div>
        </section>
    );
  }
}

export default Wrapper;

从“React”导入React；
从“./Header.jsx”导入标头；
从“/Footer.jsx”导入页脚；
类包装器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开：错，
};
}
toggleWrapper（）{
this.setState（{open:！true}）；
}
渲染（）{
const toggle=this.state.open？'open'：''；
返回(
{this.props.children}
);
}
}
导出默认包装器；

我正试图从其头（子）组件更新其状态，如下所示：

import React from 'react';
import {render} from 'react-dom';
import {Link} from 'react-router';

import Logo from './logo.jsx';

class Header extends React.Component {
  toggleNavigation() {
    {this.props.action}
  }
  render () {
    return (
        <header className="header">
            <button onClick={this.toggleNavigation.bind(this)} 
                    className="menu-icon hide-for-large" 
                    type="button">
            </button>
            <Logo />
            <nav className="main-nav">
                <li>
                    <Link to='/'>about us</Link>
                </li>
                <li>
                    <Link to='/projects'>projects</Link>
                </li>
                <li>
                    <Link to=''>production</Link>
                </li>
                <li>
                    <Link to=''>area director</Link>
                </li>
            </nav>
            <i className="fa fa-envelope-o float-right contact-us-icon" aria-hidden="true"></i>
        </header>
    );
  }
}

export default Header;

从“React”导入React；
从'react dom'导入{render}；
从“反应路由器”导入{Link}；
从“/Logo.jsx”导入徽标；
类头扩展了React.Component{
toggleNavigation（）{
{this.props.action}
}
渲染（）{
返回(

关于我们


项目


生产


区域主任

);
}
}
导出默认标题；

我试图将“toggleWrapper”方法作为一个道具传递，这样我就可以通过头部组件中的单击事件来更改状态

---

但是，当我单击图标时，屏幕上什么也没有发生。

您的方法是正确的，但是您的代码有两个问题：首先，您的上层组件的

toggleWrapper

函数实际上不会将状态更改为除

false

（或者更确切地说，

！true

）以外的任何其他状态。像这样修复它：

import React from 'react';
import {render} from 'react-dom';
import {Link} from 'react-router';

import Logo from './logo.jsx';

class Header extends React.Component {
  toggleNavigation() {
    {this.props.action}
  }
  render () {
    return (
        <header className="header">
            <button onClick={this.toggleNavigation.bind(this)} 
                    className="menu-icon hide-for-large" 
                    type="button">
            </button>
            <Logo />
            <nav className="main-nav">
                <li>
                    <Link to='/'>about us</Link>
                </li>
                <li>
                    <Link to='/projects'>projects</Link>
                </li>
                <li>
                    <Link to=''>production</Link>
                </li>
                <li>
                    <Link to=''>area director</Link>
                </li>
            </nav>
            <i className="fa fa-envelope-o float-right contact-us-icon" aria-hidden="true"></i>
        </header>
    );
  }
}

export default Header;

toggleWrapper（）{
this.setState（{open:！this.state.open}）；
}

其次，子组件中的

toggleNavigation

函数实际上并不调用该函数。在这种情况下，您甚至不需要单独的函数，只需执行以下操作：