React组件之间的通信（有一个onKeydown事件可参考）

单向数据流：自上而下进行数据的传递
：父级将一个回调函数当做属性传给子级，子级可以调用函数从而和父级通信

demo :
https://codepen.io/iambabewin/pen/MQedPW?editors=1010
(存在一个bug，未修复）

  class Child extends React.Component {
    onKeydown(e){
      console.log(e.keyCode);
      if(e.keyCode===13){
        this.props.inputnum(e.target.value)
      }
    }
    render() {
      return (
        

          

            this.onKeydown(e)} placeholder="请输入数字 按回车"/>
          
         this.props.add()}>+
          {this.props.num}
         this.props.sub()}>-
          {this.props.subnum}
           
        
      )
    }
  }
  class Parent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        num: 0
      }
    }
    render() {
       return 

         
num:{this.state.num}
           this.add()} 
            sub={()=> this.sub()} 
            num={this.state.num} 
            subnum={this.state.num-1}
            inputnum={(num)=>this.inputnum(num)}
           >   
        
;
    }
    add() {
      this.setState({num: this.state.num+1})
    }
    
    sub() {
      this.setState({num: this.state.num-1})
    }
    inputnum(num){
        this.setState({num:num})
    }
  }
  const element = ;
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

查看详细文档
https://www.cnblogs.com/libin-1/p/6604520.html