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中父级的父级设置状态？

回答

相关问题