react实现todolist
React之todolist
react实现todolist，也就一个简易的购物车。难点在于子父组件之间的通讯问题。主要通过一个属性值来传递一个函数给子组件执行，通过这个函数达到给父组件传值的目的。还需要注意的是这个函数的执行环境绑定到父组件上。
注意：本篇代码中的onchang并不是事件函数，而是通过onchang传递一个函数给子组件，供子组件传值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<title>购物车</title>
<style>
*{
margin: 0;
padding: 0;
}
.btn{
width:50px;
height:30px;
cursor: pointer;
}
.count_txt{
display: inline-block;
width:40px;
text-align: center;
}
ul li{
list-style: none;
}
.count_box{
display: inline-block;
}
li{
width:800px;
padding:10px 0;
}
li>span{
display: inline-block;
width:200px;
}
.shop_box{
width: 800px;
margin: 100px auto;
}
h1{
padding-bottom:50px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class CountDemo extends React.Component{
constructor(){
super();
}
handleClick(type){
if(type=="add"){
this.props.onchange([1,this.props.id])
}else{
this.props.onchange([-1,this.props.id])
}
}
render(){
return(
<div className="count_box">
<button className="btn" onClick={this.handleClick.bind(this,"sub")}>-</button>
<span className="count_txt">{this.props.num}</span>
<button className="btn" onClick={this.handleClick.bind(this,"add")}>+</button>
</div>
)
}
}
class ListDemo extends React.Component{
constructor(){
super();
this.state={
allcount:0,
}
}
render(){
let {id,name,price,num,total}=this.props.data
return(
<li>
<span>{name}</span>
<span>{price}</span>
<span><CountDemo id={id} num={num} onchange={val=>{this.props.onchange(val)}}/></span>
<span>{total}</span>
</li>
)
}
}
class Shop extends React.Component{
constructor(){
super();
this.state={
listdata:[{
id:"001",name:"电脑",price:1000,total:0,num:0
},{
id:"002",name:"鼠标",price:120,total:0,num:0
},{
id:"003",name:"键盘",price:200,total:0,num:0
},{
id:"004",name:"U盘",price:50,total:0,num:0
}],
zongjia:0,
}
}
handleChange(val){
this.state.zongjia=0
this.state.listdata.map(item=>{
if(item.id==val[1]){
item.num+=val[0]
item.total=item.price*item.num
}
})
this.state.listdata.map(item=>{
this.state.zongjia+=item.total
})
this.setState({})
}
render(){
var list=this.state.listdata.map((item)=>{
return <ListDemo data={item} key={item.id} onchange={val=>{ this.handleChange(val)}}/>
})
return(
<div className="shop_box">
<h1>简易购物车</h1>
<ul>
<li>
<span>商品名称</span>
<span>价格</span>
<span>数量</span>
<span>总价</span>
</li>
{list}
</ul>
<h2>总价：{this.state.zongjia}</h2>
</div>
)
}
}
ReactDOM.render(
<div>
<Shop/>
</div>,
document.getElementById('app')
)
</script>
</body>
</html>
