Доступ к методу родительского класса от ребенка в ReactJS

Question

У меня небольшая проблема, когда у меня есть родительский класс и дочерний класс. Я хочу изменить состояние, которое было инициализировано в родительском классе, чтобы я мог видеть обновленное состояние в родительском классе. Вот код:

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return{ 
      my_value: 0 
     } 
    }, 

    _increaseValue: function(){ 
     this.state.my_value++; 
    }, 

    render: function(){ 
     return(
      <div><Child /></div> 
     ) 
    } 
}); 

var Child = React.createClass({ 
    render: function(){ 
     //at button I want to access _increaseValue function of parent 
     return (
      <div> 
       <button onClick={_increaseValue}>Increase</button> 
      </div> 
     ); 
    } 
}); 

Теперь, когда пользователь нажимает на кнопку в дочернем классе я хотел бы получить в родительском классе обновленный my_value, таким образом, мои вопросы:

1. Возможно ли это?
2. Если да, то как это делается?
3. Это хорошая практика или нет?

Answer 1

1. Возможно ли это?

   да, можно

2. Если да, то как это делается?

   вы можете передать родительский метод к ребенку через props, как так

   var Parent = React.createClass({ 
       getInitialState: function(){ 
       return { 
        my_value: 0 
       } 
       }, 
   
       onChangeValue: function() { 
       var value = this.state.my_value + 1; 
   
       this.setState({ 
        my_value: value 
       }) 
       }, 
   
       render: function() { 
       return <div> 
        <Child 
        onChangeValue={ this.onChangeValue } 
        value={ this.state.my_value } 
        /> 
       </div>; 
       } 
   }); 
   
   var Child = React.createClass({ 
       _handleClick: function(){ 
       this.props.onChangeValue(); 
       }, 
   
       render: function(){ 
       return <div> 
        <h1> { this.props.value } </h1> 
        <button onClick={ this._handleClick }>Increase</button> 
       </div> 
       } 
   }); 
   

   Example

3. Это хорошая практика, или нет?

   Это хорошая практика

Answer 2

Вам необходимо передать функцию через реквизит в ваш дочерний компонент. И когда вам нужно изменить, вы вызываете эту функцию. Это обычная практика и реакция.

Пример:

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return{ 
      my_value: 0 
     } 
    }, 

    onChildClick: function() { 
     this.setState({ 
      my_value: this.state.my_value + 1 
     }) 
    }, 

    render: function(){ 
     return(
      <div> 
       {this.state.my_value} 
       <Child onClick={this.onChildClick.bind(this)}/> 
      </div> 
     ) 
    } 
}); 

var Child = React.createClass({ 
    _handleClick: function(){ 
     this.props.onClick(); 
    }, 

    render: function(){ 
     return (
      <div> 
       <button onClick={this._handleClick}>Increase</button> 
      </div> 
     ); 
    } 
}); 

Example on JSFiddle