陣營更新組件的狀態從子組件

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」方法作爲道具傳遞，以便可以通過頭部組件內的單擊事件來更改狀態。

但是，當我點擊圖標時，屏幕上沒有任何反應。

Answer 1

你的做法是正確的，但你的代碼有兩個問題：首先，你的上組件的toggleWrapper功能實際上並不狀態更改爲false其他任何東西（或者更確切地說，!true）。解決這個問題是這樣的：

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

其次在你的子組件的toggleNavigation功能實際上並沒有調用該函數。在這種情況下，您甚至不需要單獨的功能，您可以簡單地執行此操作：

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