点开查看代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>todolist2</title> <link rel="stylesheet" href=""> <script type="text/javascript" src="../build/react.js"></script> <script type="text/javascript" src="../build/react-dom.js"></script> <script type="text/javascript" src="../build/browser.min.js"></script> </head> <body> <div id="box"> </div> <script type="text/babel"> var Todolist=React.createClass({ //初始化状态 getInitialState:function(){ return({ collection:[]}) }, render:function(){ return( <div> <input type="text" name="" ref="yzxText"/> <input type="button" name="" value="add" onClick={this.handleClick}/> <List items={this.state.collection} delEvent={this.DelClick}> </List> </div> ) }, handleClick:function(){ this.state.collection.push(this.refs.yzxText.value); this.setState({ collection: this.state.collection }) }, DelClick:function(index){ this.state.collection.splice(index,1); this.setState({ collection: this.state.collection }) } }); var List=React.createClass({ render:function(){ var _this=this; return( <ul> { this.props.items.map(function(item,index){ return <li key={index}>{item} <input type="button" name="" value="del" onClick={ _this.handleDelclick.bind(_this,index)}/> </li> }) } </ul> ) }, handleDelclick:function(index){ this.props.delEvent(index); } }) ReactDOM.render(<Todolist></Todolist>,document.getElementById('box')); </script> </body> </html>
*此案例重点在React的父子组件之间数据的传递。
*父组件影响子组件时，通常通过设置状态，子组件设置一个属性来接收这一状态的值。
*子组件要影响父组件时,通过改变自身属性（这里的属性值为一个函数，这样就和父组件产生了联系），这个函数里给父组件设置新的状态的值。
*在动态获取数据渲染dom时，通常需要通过map映射数组，return结果，这个结果通常就是我们需要映射出的节点。这里this指向是window,而不是组件本身,所以通常需要在渲染时先保存this。
*要获取事件的索引值并对一个函数传参但不执行这个函数时，在方法名后.bind(_this,index)来改变this的指向并且给函数传入index参数。