Question

我有以下组件：

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;

我试图从它的标题（子）组件更新它的状态，如下所示：

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”方法作为道具传递，以便我可以在标题组件中使用click事件更改状态。

但是，当我点击图标时，屏幕上没有任何反应。

Answer 1

您的方法是正确的，但您的代码有两个问题：首先，您的上层组件toggleWrapper函数实际上并未将状态更改为false以外的任何其他内容（或者更确切地说），!true）。修复如下：

toggleWrapper() {
  this.setState({open: !this.state.open});
}

其次，子组件中的toggleNavigation函数实际上并不调用该函数。在这种情况下，你甚至不需要单独的功能，你可以简单地这样做：

<button onClick={this.props.action} ...

从子组件中反应更新组件状态

1 个答案: