点开查看代码
<!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参数。
时间： 2024-10-12 17:28:27