react通过组件拆分实现购物车界面详解
作者：是张鱼小丸子鸭
这篇文章主要介绍了react通过组件拆分来实现购物车页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
页面组件拆分图
功能点
- 实现全选反选
- 数量的增加和减少
- 选中删除，单独删除
- 商品总价和商品总数量的变化
首先在根组件中把页面的布局以及功能先实现，然后再拆分组件，最后通过组件传值进行属性和方法的传递
代码展示
app.js组件
import axios from 'axios';
import React, { Component } from 'react';
import './App.css';
import Cartfoot from './Component/Cartfoot';
import CartList from './Component/CartList';
export default class App extends Component {
constructor() {
super()
this.state = {
list: [],
checked:false
}
this.getCart()
}
getCart = async () => {
let res = await axios.get('http://127.0.0.1:3002/getCart')
console.log(res.data.data);
let carts = res.data.data
carts.map(item => {
return item.checked = false
})
this.setState({
list: carts
})
}
// 全选
qx=(e)=>{
let {list}=this.state
list.map(item=>item.checked=e.target.checked)
this.setState({
list:list,
checked:e.target.checked
})
}
// 反选
fx=(index)=>{
let {list}=this.state
list[index].checked = !list[index].checked
this.setState({
list:list,
checked:list.every(item=>item.checked)
})
}
// 选中删除
checkDel=()=>{
let {list}=this.state
let delAll=list.filter(item=>!item.checked)
this.setState({
list:[...delAll]
})
}
// 数量加减操作
handlerNum=(index,type="jia")=>{
let {list}=this.state
type==='jia'?list[index].num++ :list[index].num--
this.setState({
list:list
})
}
// 计算操作
count=()=>{
let total=0
let nums=0
let {list}=this.state
list.forEach(item=>{
if(item.checked){
total+=item.num*item.prize
nums+=item.num
}
})
return [total,nums]
}
// 删除按钮
Del=(index)=>{
let {list}=this.state
list.splice(index,1)
this.setState({
list:list
})
}
render() {
let { list ,checked} = this.state
return (
<div className='App'>
<table className='table'>
<thead>
<tr>
<th><input type="checkbox" checked={checked} onChange={this.qx}/></th>
<th>ID</th>
<th>名字</th>
<th>图片</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<CartList list={list} fx={this.fx} qx={this.qx} handlerNum={this.handlerNum} Del={this.Del} checked={checked}></CartList>
<Cartfoot count={this.count} checkDel={this.checkDel}></Cartfoot>
</table>
</div>
)
}
}在app组件中，我们把所有的方法和请求到的数据接口写在这里，然后再通过props属性进行组件间的通信
CartList.js组件
import React from 'react'
import CartItem from './CartItem'
export default function CartList(props) {
return (
// <div>
<tbody>
{
props.list.map((item, index) => {
return (
<CartItem {...props} item={item} index={index} key={index}/>
)
})
}
</tbody>
// </div>
)
}上面的{...props}是因为组件在传递属性时，如果传递的时候是一个对象属性，我们可以使用扩展运算符传递数据
Cartfoot.js组件
import React from 'react'
export default function Cartfoot(props) {
return (
<tfoot>
<tr>
<td colSpan={7}>
商品总价格:<strong>{props.count()[0]}</strong>
商品总数量:<strong>{props.count()[1]}</strong>
<button onClick={props.checkDel}>选中删除</button>
</td>
</tr>
</tfoot>
)
}CartItem.js组件
import React from 'react'
import CartColltract from './CartColltract'
export default function CartItem(props) {
let {item,index}=props
return (
<tr>
<td><input type="checkbox" checked={item.checked} onChange={()=>props.fx(index)}/></td>
<td>{item._id}</td>
<td>{item.name}</td>
<td><img src={item.phopo} alt="" /></td>
<td>{item.prize}</td>
<td>
<CartColltract {...props} item={item} index={index}></CartColltract>
</td>
<td><button onClick={()=>props.Del(index)}>删除</button></td>
</tr>
)
}CartColltract.js组件
import React from 'react'
export default function CartColltract(props) {
let {index,item}=props
return (
<div>
<button className='danger' disabled={item.num === 1} onClick={()=>props.handlerNum(index,'jian')}>-</button>
<input type="text" value={item.num} readOnly />
<button onClick={()=>props.handlerNum(index,'jia')}>+</button>
</div>
)
}像我们上面组件那样，组件之间层层嵌套，我们不仅可以使用普通父传子，子传父的组件通信方式进行组件传值，也可以使用context兄弟组件通信
到此这篇关于react通过组件拆分实现购物车界面详解的文章就介绍到这了,更多相关react组件拆分内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！