如何将数据从子节点传递给父节点？

Question

我有一种情况,我想增加孩子们的父值.

家长:

getInitialState :function(){
    return {counter:0}
},

render(){
    <CallChild value={this.state.counter}/>

儿童成分:有 render(){ this.props.counter++;} 什么建议吗？甚至可以做这样的事情.

Answer 1

您可以在父组件中创建方法(将更改父状态),并在子组件中调用它

var CallChild = React.createClass({
  render(){
    return <div>
      <h1>{ this.props.value }</h1>
      <button onClick={ this.props.onClick }>+</button>
    </div>
  }
});

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

  handleIncrement: function () {
    this.setState({ counter: this.state.counter + 1 });
  },

  render(){
    return <div>
      <CallChild onClick={ this.handleIncrement } value={this.state.counter} />
    </div>
  }
});

Example