先来代码，
action
function cart(state = {data:[],loading:true},action){
switch(action.type){
case "CARTLIST_UPDATA":
return{
loading:true,
data:state.data
}
case "CARTLIST_SUCC":
return{
loading:false,
data:action.data
}
case "CARTLIST_REEOR":
return{
loading:false,
data:[]
}
default:
return state;
}
}
export default cart;
购物清单一览页面
import React, { Component } from 'react';
import {Link} from "react-router-dom";
import axios from 'axios';
import {connect} from "react-redux";
import { Layout,List,Row,Col,Button} from 'antd';
const { Content } = Layout;
class CartList extends Component{
constructor(arg){
super(arg);
this.state = {
count:'',
total:''
};
this.getData();
}
getData(){
this.props.dispatch((dispatch)=>{
dispatch({
type:"CARTLIST_UPDATA"
});
axios.get("https://5f3b67bbfff8550016ae5344.mockapi.io/api/v1/cartList")
.then((res)=>{
dispatch({
type:"CARTLIST_SUCC",
data: res.data
});
})
.catch((error)=>{
dispatch({
type:"CARTLIST_REEOR",
data: error
});
})
});
}
handleCount=(e)=>{
this.setState({
count:e.target.value
})
}
doChange=()=>{
}
doSubmit=(e)=>{
e.preventDefault();
axios({
method: 'post',
url: '',
data: {}
});
this.props.history.push("/addressConfirm/");
}
render(){
let {data,loading} = this.props;
console.log(data);
return(
<Content style={{ padding: '0 50px' }}>
<Layout className="site-layout-background" style={{ padding: '24px 0' }}>
<Content style={{ padding: '0 24px', minHeight: 840 }}>
<div className = "cartList" style = {{textAlign:"left"}}>
<br/>
<Link to = '/'>首页</Link>
<span style = {{marginLeft:"50px",marginRight:"50px"}}>购物车内容</span>
<br/>
</div>
<Row>
<Col span={18}>
<hr/>
<div>
<List
loading = {loading}
itemLayout="vertical"
size="large"
pagination={{onChange: page => {console.log(page);},pageSize: 10}}
dataSource={data}
renderItem={item => (
<List.Item>
<img width={280} src={item.pic} style = {{float:"left"}}/>
<div style = {{textAlign:"left"}}>
<h1>{item.itemName}</h1>
担当部署：{item.szk}<br/>
在庫数：{item.storage}<br/>
価額：{item.price}<br/>
<br/>
<div>
购买数量: <input type = "text" defaultValue = {item.count} onChange = {this.handleCount} style = {{width:"50px"}}/>
<Button onClick = {this.doChange} >变更</Button>
<Button onClick = {this.doDelete} >删除</Button>
</div>
</div>
</List.Item>
)
}
/>
<br/>
</div>
</Col>
<Col span={6}>
<div style = {{float:"right",position:"absolute",left:"50px",top:"5px"}}>
<form style = {{borderRadius:"10%",border:"1px solid",width:"300px",height:"250px"}}>
<br/>
<h2 style={{textAlign:"left"}}>购物车</h2>
<div style={{textAlign:"center"}}>
<br/>
<h3>小計:{this.state.total} </h3>
<br/>
<br/>
<input type = "submit" value = "购买" onClick = {this.doSubmit} /><br/><br/>
</div>
</form>
</div>
</Col>
</Row>
</Content>
</Layout>
</Content>
)
}
}
export default connect(state=>(state.cart))(CartList);
取到模拟数据后，遍历循环展示已经成功了。
但是我想修改购买数量的时候该怎么办。
想要实现的功能:
1.购买数量的输入框里填入数字后，点击变更会反应到模拟数据中。
2.删除按下后会把模拟数据里的那条数据删掉。
3.小计处显示当前购物车所有商品的总价
