改变不同组件的状态 - 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;

我不确定在 React 中执行此操作的正确方法，希望得到一些输入。

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 });
  }

});

改变不同组件的状态 - ReactJS

Changing state of a different component - ReactJS

reactjs