React元件間通訊(父=>子)(子=>父)(子=>爺)（刪除指定下標的資料）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box"></div>
</body>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel">
//孫子
var ToDoItem=React.createClass({
Del:function(index){
console.log(index)
//把下標傳遞給爺爺
this.props.MyListDel(index)
},
render:function(){
return <li>
<button onClick={()=>{this.Del(this.props.MyIndex)}}>刪除</button>
{/*接收父元件傳來的值*/}
<span>{this.props.MyCounter}</span>
</li>
}
})
//父親
var ToDoList=React.createClass({
render:function(){
return <ul>
{/* <ToDoItem></ToDoItem> 接收父元件傳來的值再通過map遍歷 然後把值MyCounter傳遞給子元件 MyListDel刪除指定下標通過爺爺定義方法傳遞給孫子*/}
{this.props.MyList.map((value,index)=>{
return <ToDoItem key={index} MyCounter={value} MyListDel={this.props.myDel} MyIndex={index}></ToDoItem>
})}
</ul>
}
})
//父親的兄弟
var ToDoInput=React.createClass({
myInput:function(){
this.props.myfanter(this.refs.MyValue.value)
},
render:function(){
return <div>
<h1>請輸入字元</h1>
<input type="text" ref='MyValue'/>
<button onClick={this.myInput}>新增</button>
</div>
}
})
//爺爺
var ToDoBOx=React.createClass({
//1.1定義一個數組接收兒子傳來資料
getInitialState:function(){
return {list:[]}
},
//1.父親定義方法傳給子元件
fanter:function(msg){
//1.2將兒子每次傳遞過來的值放入list
var text=this.state.list;
text.push(msg)
this.setState({list:text})
console.log(this.state.list)
},
DelList:function(index){
//根據孫子傳遞過來的值刪除下標
var text=this.state.list
text.splice(index,1)
this.setState({list:text})
},
render:function(){
return <div>
<ToDoInput myfanter={this.fanter}></ToDoInput>
<ToDoList MyList={this.state.list} myDel={this.DelList}></ToDoList>
</div>
}
})
ReactDOM.render(<ToDoBOx></ToDoBOx>,document.getElementById('box'))
</script>
</html>