标签：lstat arp create 属性 通信 log handle function efs
基于React写的小todoList
最近在学习阮大的react入门,自己试着写的ToDoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 子与父通信，3个步骤
/*
①在父组件中 定义一个带有参数的方法
②将该方法传递给子组件
③在组件中通过属性调用传来的方法（指定要发送的数据）
*/
// 父与子通信 2个步骤
/*
①在父组件中 调用子组件时 指定属性
②在子组件中 读属性对应的值
*/
var ToDoInput=React.createClass({
handleClick:function(){
//读取通过属性传递来的方法,将值通过该方法传递给父组件
this.props.funcAdd(this.refs.myInput.value)
this.refs.myInput.value=""
},
render:function(){
return <div>
<h3>待做事项列表</h3>
<input type="text" ref="myInput"/>
<button onClick={this.handleClick}>Add</button>
</div>
}
})
var ToDoList=React.createClass({
render:function(){
return <ul>
{
this.props.list.map((content,index)=>{
return <ToDoItem key={index} myIndex={index}
myValue={content} delete={this.props.funcDelete} />
})
}
</ul>
}
})
var ToDoItem =React.createClass({
handleClick:function(){
//点击删除按钮时候,应该是从ToDoBox状态的数组中数据
this.props.delete(this.props.myIndex)
},
render:function(){
return <li>
<button onClick={this.handleClick}>delete</button>
<span>{this.props.myValue}</span>
</li>
}
})
var ToDoBox = React.createClass({
getInitialState:function(){
return {myList:[123,123]}
},
addToList:function(result){
//将用户传递来的result添加到状态对应的数组中
var nowList=this.state.myList
nowList.push(result)
this.setState({myList:nowList})
},
deleteFromList:function(index){
var nowList=this.state.myList
nowList.splice(index,1)
this.setState({myList:nowList})
},
render:function(){
return <div>
<ToDoInput funcAdd={this.addToList}/>
<ToDoList list={this.state.myList}
funcDelete={this.deleteFromList}/>
</div>
}
})
//将根组件 ToDoBox渲染
ReactDOM.render(
<ToDoBox/>,
document.getElementById(‘example‘)
)
</script>
</body>
</html>
感谢分享
标签：lstat arp create 属性 通信 log handle function efs
原文地址：http://www.cnblogs.com/sirbin/p/7763590.html
