세 개의 구성 요소 부모 구성 요소 (index. jsx) 와 두 개의 하위 구성 요소 (addlist. jsx, todolist. jsx) 부모 구성 요소가 하위 구성 요소를 전달하는 방법은 두 가지가 있습니다. 첫 번째는 다음과 같습니다. props 방식의 전송 값입니다. 예를 들어 데이터는 부모 constructor () {this.state = {data: "부모 수치"} 전송 방법: 하위 클래스가 전송 값을 호출하기 시작합니다:this.props.fffsss에서 값을 전송하는 방법:this.props.fangfaName (매개 변수) 는 부류에 대응하는 방법을 호출할 수 있습니다. 두 번째 방법은ref 방법ref 방식에 한계가 있습니다. 같은 이름은 한 번만 값을 부여할 수 있습니다. (같은 구성 요소 내) 호출:this.refs.myInput.target  .현재 대상을 얻을 수 있는 방법: 호출은: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 (
			

			
임무 메모
			 	
			
			 :{this.state.finishNum}
			 :{this.state.arr.length}
			

			
			)
	}
}

ReactDOM.render(
,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 (
			

			

			 
			
			)
	}
}

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 
				
vm.handleClick(e)} style={item.showbol==false?show:hide}
				/>{vm.updateMess(e,item)}}/>
				vm.updateArr(item)} style={item.showbol==false?show:hide}>{item.mess}
				)
				})

		return (	
			

			{ddss}
			
			)		
	}
}

module.exports=Todolist;