分三個元件
父元件(index.jsx)和兩個子元件(addlist.jsx,todolist.jsx)
父元件傳子元件的方法有兩個
第一種：props方式
傳值
如:<child fffss={this.state.data} />   data是父類constructor(){this.state={data:"父類數值"} }
傳方法
如:<child fangfaName={this.父類方法名.bind(this,這裡可以選擇新增多個引數)}/>
子類開始呼叫
傳值：
this.props.fffsss就能獲取值
傳方法:
this.props.fangfaName(引數) 就能呼叫對應父類的方法
第二種:ref方法
ref方式有侷限性,相同的名字只能賦值一次
傳值(同一個元件內)：
<input ref="myInput" type="text"/>   呼叫：this.refs.myInput.target  。就能獲取當前物件
方法:
<child ref="diaoyong" />    呼叫是: this.refs.diaoyong.子類的方法。這是在父類裡的寫法

index.jsx

var React=require("react");
var ReactDOM=require("react-dom");
//顯示子元件
var Todolist=require("./page/todolist.jsx");
//新增子元件
var Addlist=require("./page/addlist.jsx");

class Main extends React.Component{
	constructor(props){
		super(props);
		this.state={
			arr:[],
			finishNum:0
		}
	    this.delArr=this.delArr.bind(this)
	} //constructor

	//新任務新增到陣列內的方法
	addTask(newItem){
		let arrlist=this.state.arr;
		arrlist.push(newItem);
		console.log(arrlist);
		this.setState({
			arr:arrlist
		})
	}
	
	//刪除(替代)任務方法
	delArr(){
		let data=this.state.arr;
		let xxxxa=[];
		for (var i = 0; i < data.length; i++) {
			if(data[i].bol==false){
				xxxxa.push(data[i])
			}
		}
		console.log(xxxxa);
		this.setState({
			arr:xxxxa
		})
	}
	//獲取當前選中物件的方法
	changeArr(obj){
		let list=this.state.arr;
		list.forEach((item,index)=>{
			if (item.id==obj.id) {
				item.bol=obj.bol;
			}
		})
		this.setState({
			arr:list
		})
	}
	//修改當前雙擊物件屬性方法
	changeObj(obj){
		let list=this.state.arr;
		list.forEach((item,index)=>{
			if (item.id==obj.id) {
				item.showbol=!obj.showbol;
				item.mess=obj.mess;
			}
		})
		console.log(list);
		this.setState({
			arr:list
		})
	}

	render(){
		return (
			<div>
			<h1>任務便籤</h1>
			<button onClick={this.delArr}>刪除</button>	
			<Todolist showlist={this.changeArr.bind(this)} todo={this.state.arr} updateDisplay={this.changeObj.bind(this)}	/>
			<span>已完成了:{this.state.finishNum}</span>
			<span>總計:{this.state.arr.length}</span>
			<Addlist  addMethod={this.addTask.bind(this)}/><br/>
			</div>
			)
	}
}

ReactDOM.render(<Main/>,document.getElementById("box"))
 

addlist.jsx

var React=require("react");
//用於賦值給id
var index=0;
class Addlist extends React.Component{
	constructor(props){
		super(props);
		this.addObj=this.addObj.bind(this);
	}
	addObj(){
		let mess1=this.refs.myInput.value;
		let id1=index++;
		let bol1=false;
		let obj={
			id:id1,
			mess:mess1,
			bol:bol1,
			showbol:false
		}
		//呼叫父類傳過來的方法
		this.props.addMethod(obj);
	}
	render(){
		return (
			<div>
			<input type="text" ref="myInput"/><br/>
			<button onClick={this.addObj}>新增</button>
			</div>
			)
	}
}

module.exports=Addlist
 

todolist.jsx

var React=require("react");
var ReactDOM=require("react-dom");

class Todolist extends React.Component{
	constructor(props){
		super(props);
		this.handleClick=this.handleClick.bind(this);
		this.updateArr=this.updateArr.bind(this);
		this.updateMess=this.updateMess.bind(this);
	}
	//獲得當前勾選checkbox值
	handleClick(e){
		let bol1=e.target.checked;
		let id1=e.target.value;
		let obj={
			id:id1,
			name:"",
			bol:bol1,
		}
		//呼叫父類傳來的方法,對應父類的changeArr方法
		this.props.showlist(obj);
	}
	//修改方法
	updateArr(item){
		/*console.log(this.refs.updateInput.value);*/
		/*item.mess=this.refs.updateInput.value;*/
		this.props.updateDisplay(item);
	}
	updateMess(e,item){
        console.log(e.target.value.length);
        if (e.target.value.length>0) {
        	item.mess=e.target.value;
        }    
		this.props.updateDisplay(item);
	}

	render(){
		const show={
			display:'inline'
		}
		const hide={
			display:'none'
		}
	    var vm=this;	
		var ddss=this.props.todo.map(function(item,i){
				return(
				//key值必須唯一併且值不能被再次改變
				<li key={item.id}><input type="checkbox" value={item.id} name="choose1" 
				onChange={(e)=>vm.handleClick(e)} style={item.showbol==false?show:hide}
				/><input type="text" style={item.showbol==true?show:hide} ref="updateInput" onBlur={(e)=>{vm.updateMess(e,item)}}/>
				<span onDoubleClick={()=>vm.updateArr(item)} style={item.showbol==false?show:hide}>{item.mess}</span></li>
				)
				})

		return (	
			<ul>
			{ddss}
			</ul>
			)		
	}
}

module.exports=Todolist;