onClick爲React中父級的父級設置狀態？

所以我是React的新手，仍然在學習，從父元素管理onClick很容易，但我不知道如何才能將點擊一個或多個步驟發送給父母的父母。在我的設置中，組件就像這個頁面>頁眉>菜單按鈕。 Header comp控制菜單的打開和關閉，但爲了我的動畫目的，我需要在Page Parent中設置一個狀態，以便它可以將它傳遞給其他Header的兄弟組件。當點擊菜單按鈕時，我需要將它一直髮送到頁面。有人可以解釋這是如何實現的嗎？我發現的大多數例子都只是談論了一個直接的父子onClick句柄，我已經在使用Header和Menu Button組件進行操作。onClick爲React中父級的父級設置狀態？

來源

2017-08-07 user3376065

請看下面的例子...

使用已通過反應組件繼承鏈傳遞的一個單擊處理。

function MenuButton(props) { 
    return <button onClick={props.onClick}>Do Something</button> 
} 

function Header(props) { 
    return (
     <div> 
     <MenuButton onClick={props.onClick} /> 
     </div> 
    ) 
}

建立在父母最成分，並通過爲道具，像這樣的孩子組成一個單擊處理...

class Page extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      someStateToCache: false 
     }; 
     this.clickHandler = this.clickHandler.bind(this); //bind context to click handler 
    } 

    clickHandler() { 
     this.setState({ someStateToCache: true }); 
    } 

    render() { 
     return (
      <div> 
       <Header onClick={this.clickHandler} /> 
      </div> 
     ); 
    } 
}

來源

2017-08-07 15:41:43

發現我在Facebook上的文檔的答案在「提升狀態上」，但你的解釋更簡單，所以謝謝！ https://facebook.github.io/react/docs/lifting-state-up.html – user3376065

真棒，快樂的編碼=] –

onClick爲React中父級的父級設置狀態？

回答

相關問題