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...]}