在 React JS 中将 props 传递给父级

这里我有一个默认数字“3”的文本字段，我希望在输入值并单击按钮时更新它。因为我正在更新 Child 中的值，所以我不知道如何将 props 传递给 Parent。

var Game = React.createClass({
    getInitialState: function() {
        return {
           input: 3
        };
    },

    setSize: function() {
        //here it should update "input"
        this.setState({input: /* value from Child */ })
    },

    render: function() {
        return( 
            <div>
                <div id='game'>
                    <Menu input={this.state.input}/>
                </div>
            </div>
        )
    }  
});


var Menu = React.createClass({
    render: function() {
        return (
            <div id='menu'>
                <input type="number" id="myNumber" value={this.props.input}> </input>
                <button id="mySetNumber" onclick={this.props.setSize}>Try it</button>
            </div>
        )
    }
})

它可以是这样的：

var Game = React.createClass({
  changeInput: function(e) {
    this.setState({/* do something */})
 },

 render: function() {
  return (
    <div id="game">
      <Menu onValueChange={this.changeInput} />
    </div>
    )
  }
});

var Menu = React.createClass({
  handleChange: function(e) {
    this.props.onValueChange(/* pass the element or the value */)
  }

 render: function() {
   return (
     <div id="menu">
       <input onChange={this.handleChange}/>
    </div>
   )
  }
})

或多或少像这样的东西应该有效。更多请参见this https://stackoverflow.com/questions/22639534/。这个想法是将回调函数从父级传递给子级。