更改不同组件的状态 - ReactJS

Question

我正在尝试使用具有两个组件的react构建一个简单的应用程序,一个嵌入另一个组件中.子组件是一个缩小的菜单,单击它时会扩展.我希望能够在单击父元素时重新收缩它,或者当子元素失去焦点时.

这是父组件的样子:

import React from 'react';
import MenuBar from './_components/MenuBar.js';

var div = React.createFactory('div');
var menu = React.createFactory(MenuBar);

var HomeComponent = React.createClass({
    render: function() {
        return div({ className: 'page home current', onClick: changeChildState //change the state of the child component to false },
            menu()
        )
    }
});



export default HomeComponent;

这是子组件的样子:

import React from 'react';

var div = React.createFactory('div');

var MenuBar = React.createClass({
    getInitialState: function() {
        return ({menuIsShowing: false});
    }
    showMenu: function() {
        return this.setState({menuIsShowing: true});
    },
    render: function() {
        var isShowing = this.state.menuIsShowing ? 'menuSlideDown' : '';
        return div({ className: 'menu-bar ' + isShowing, onClick: this.showMenu });
    }
});

export default MenuBar;

我不确定做出反应的正确方法,并且会喜欢一些输入.

Answer 1

实现目标的一种方法是将 ChildComponent 展开状态保持在父组件状态中。通过 props 将 isExpand 布尔值传递给子组件。同时，还向 ChildComponent 传递回调以更新父组件的 isExpand 状态。

var HomeComponent = React.createClass({
  getInitialState: function() {
    return ({menuIsShowing: false});
  },

  changeChildOpenStatus: function() {
    this.setState({menuIsShowing: true});
  },

  render: function() {
    return div({ className: 'page home current', onClick: this.changeChildOpenStatus },
      menu({ menuIsShowing: this.state.menuIsShowing, handleChildClicked: this.changeChildOpenStatus })
    )
  }
});

然后在子组件中

var MenuBar = React.createClass({
  handleExpandClicked: function(event) {
    this.props.handleChildClicked(event);
  },

  render: function() {
    var isShowing = this.props.menuIsShowing;
    return div({ className: 'menu-bar ' + isShowing, onClick: this.handleExpandClicked });
  }

});