React学习（一）父子组件通讯

React父子组件之间通讯，利用props和state完成，首先React是单向数据流，父组件可以向子组件传递props；

实现父子组件双向数据流整体的思路是：

1，父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数

2，子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去

图形表示的话：大概长这样

newState通过父组件的回调函数传递回去

下面是我自己写的一个便签实例：

//Note组件代码：
import React,{Component} from 'react';
import { render } from 'react-dom';
class EditPanel extends Component{ //子组件
  constructor(props){
     super(props);
     this.state=this.props.item;//通过props初始化编辑便签子组件的state
     this.handleEditFinish=this.handleEditFinish.bind(this);
  }
  handleEditFinish(e){    
    var date=new Date();
    var newState={
      content:e.target.previousSibling.value,
      date:date.toLocaleDateString()     
    } 
    this.props.onChange(newState);//回调函数传递参数给父组件
  }
  render(){
     return(
         <div className="edit-panel" style={{display:this.props.item.edit?"block":"none"}}>//子组件的显示由父组件控制
           <textarea  cols="30" rows="10" defaultValue={this.state.content} /> 
           <a href="#" onClick={this.handleEditFinish}>完成</a>
         </div>
       )
  }
}

class Note extends Component{ //父组件
  constructor(props){
     super(props);
     this.state={
          content:this.props.content,
          date:this.props.date,
          edit:false
     }
     this.handleEdit=this.handleEdit.bind(this);
     this.handleDelete=this.handleDelete.bind(this);
     this.handleChildChange=this.handleChildChange.bind(this); //监听子组件变化
  }
  handleChildChange(newState){ //处理子函数传回来的state,改变自身的state
    if(newState){
          this.setState(newState);
          this.setState({
            edit:false
          })
    }
  }
  handleEdit(e){
    e.preventDefault();
    this.setState({
        edit:true,
    })
  }
  handleDelete(e){
    e.preventDefault();
    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
  }
  render() {
      return (<div className="note-item">
               <p>{this.state.content}</p>
               <p>{this.state.date}</p>
               <a href="#" onClick={this.handleEdit}>编辑</a>
               <a href="#" onClick={this.handleDelete}>删除</a>
               <EditPanel item={this.state} onChange={this.handleChildChange}/>
             </div>
           )
  }
}
export default Note;

 

　　具体工程代码可以看github，需要注意的是this是一定要绑定的！绑定方式有两种，一种是我上面的在构造函数里面绑定一种使用箭头函数:

handleEdit=()=>{[native code...]}