React todolist例子(传参传方法)

分三个组件
父组件(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;