Изменение состояния другого компонента-ReactJS

Question

Изменение состояния другого компонента-ReactJS

Я пытаюсь построить простое приложение, используя 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 и хотел бы люблю немного поучаствовать.

462 1

reactjs

1 ответ:

Comments

Ничего не найдено.

IcyBright · Accepted Answer · 2015-03-24 22:50:34

Одним из способов достижения поставленной цели является сохранение статуса дочернего компонента expand в статусе родительского компонента. Передайте логическое значение isExpand дочернему компоненту с помощью реквизитов. В то же время, также передайте обратный вызов дочернему компоненту, чтобы обновить родительский статус 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 });
  }

});