单向数据流：自上而下进行数据的传递
：父级将一个回调函数当做属性传给子级，子级可以调用函数从而和父级通信
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 (
<div>
<div style={{marginBottom:10}}>
<input type="text" onKeyDown={(e)=> this.onKeydown(e)} placeholder="请输入数字 按回车"/>
</div>
<button onClick={()=> this.props.add()}>+</button>
<span>{this.props.num}</span>
<button onClick={()=> this.props.sub()}>-</button>
<span>{this.props.subnum}</span>
</div>
)
}
}
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
num: 0
}
}
render() {
return <div>
<h1>num:{this.state.num}</h1>
<Child
add={()=> this.add()}
sub={()=> this.sub()}
num={this.state.num}
subnum={this.state.num-1}
inputnum={(num)=>this.inputnum(num)}
></Child>
</div>;
}
add() {
this.setState({num: this.state.num+1})
}
sub() {
this.setState({num: this.state.num-1})
}
inputnum(num){
this.setState({num:num})
}
}
const element = <Parent/>;
ReactDOM.render(
element,
document.getElementById('root')
);
