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

JSFiddle上的示例