React极快上手购物车demo逻辑练习极快复习react15。

1.  
   npx create-react-app my-app
2.  
   cd my-app
3.  
   npm start

购物车功能，本项目基于react进行开发有全选反选封装了footer和list 组件 reduce 计算总价，input 搜索功能，全选删除，单个删除，事件传值，写法清新通俗易通非常适合新手。

 App.jsx 主文件上代码

1.  
   import React from 'react';
2.  
   import './App.css';
3.  
   import List from './component/list';
4.  
   // react 的坑组件的名字首字母要大写
5.  
   import Footer from './component/appFooter.jsx'
6.  
    
7.  
   export default class App extends React.Component {
8.  
   constructor(props) {
9.  
   super(props)
10.  
    this.state = {
11.  
    cardList: [{
12.  
    img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.yEH5M2URYGB8h62jG7vKGgHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.25&pid=1.7',
13.  
    name: 'Mac Book Air',
14.  
    num: 1,
15.  
    price: 8699,
16.  
    checked: false,
17.  
    id: 242332432432
18.  
    },
19.  
    {
20.  
    img: 'https://assets.ugoshop.com/proimage/e57f7e5856ad4c5aac37d5e349533bec.png!p800',
21.  
    name: 'iphone',
22.  
    num: 1,
23.  
    price: 37,
24.  
    checked: false,
25.  
    id: 242332432432421425
26.  
    }, {
27.  
    img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.rVdqtj7tUn6PClsn8Wq7xgHaKc?w=144&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7',
28.  
    name: '周虎青',
29.  
    num: 1,
30.  
    price: 4,
31.  
    checked: false,
32.  
    id: 355345435
33.  
    },
34.  
    {
35.  
    img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.keB_ghNAu-NyKNg7J2b0SQHaHa?w=203&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7',
36.  
    name: '苏日咕嘎',
37.  
    num: 1,
38.  
    price: 81,
39.  
    checked: false,
40.  
    id: 242332421425
41.  
    },
42.  
    {
43.  
    img: 'https://uploadfile.bizhizu.cn/2014/0217/20140217072454651.jpg',
44.  
    name: '孙志豪',
45.  
    num: 1,
46.  
    price: 99999,
47.  
    checked: false,
48.  
    id: 532325
49.  
    },
50.  
    {
51.  
    img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Q8fesauwGpQDaJuAQgDovAHaKR?w=146&h=203&c=7&r=0&o=5&dpr=1.25&pid=1.7',
52.  
    name: '秦明佳',
53.  
    num: 1,
54.  
    price: 88,
55.  
    checked: false,
56.  
    id: 5323255235
57.  
    },
58.  
    ],
59.  
    checkedAllFlag: false,
60.  
    local: []
61.  
    }
62.  
    }
63.  
     
64.  
     
65.  
    componentWillMount() {
66.  
    this.state.local = this.state.cardList
67.  
    this.setState({
68.  
    local: this.state.local
69.  
    })
70.  
    }
71.  
    // 增加小计
72.  
    add = (val) => {
73.  
    console.log(val);
74.  
    this.state.cardList.forEach(item => {
75.  
    if (item.id == val.id) {
76.  
    item.num
77.  
    }
78.  
    })
79.  
    this.setState({
80.  
    cardList: this.state.cardList
81.  
    })
82.  
    }
83.  
    // 减少小计
84.  
    sub = (val) => {
85.  
    this.state.cardList.forEach(item => {
86.  
    if (item.id == val.id && item.num > 1) {
87.  
    item.num--
88.  
    }
89.  
    })
90.  
    this.setState({
91.  
    cardList: this.state.cardList
92.  
    })
93.  
    }
94.  
    // 改变复选框的状态
95.  
    editChecked = (val) => {
96.  
    this.state.cardList.forEach(item => {
97.  
    if (item.id == val.id) {
98.  
    item.checked = !item.checked
99.  
    }
100.  
     })
101.  
     this.setState({
102.  
     cardList: this.state.cardList
103.  
     })
104.  
     }
105.  
     // 删除的逻辑
106.  
     deleteData = (val) => {
107.  
     this.state.cardList = this.state.cardList.filter(item => item.id != val.id)
108.  
     this.setState({
109.  
     cardList: this.state.cardList
110.  
     })
111.  
     }
112.  
     // 更改复选框的状态
113.  
     checkedAll = (val) => {
114.  
     console.log(val)
115.  
     this.state.cardList.forEach(item => {
116.  
     console.log(item.checked)
117.  
     item.checked = val
118.  
     })
119.  
     console.log(this.state.cardList)
120.  
     this.setState({
121.  
     cardList: this.state.cardList
122.  
     })
123.  
     }
124.  
      
125.  
     // 反选的状态
126.  
     editCheckedFlag = (val) => {
127.  
     console.log(val)
128.  
     this.state.checkedAllFlag = this.state.cardList.every(item => item.checked)
129.  
     this.setState({
130.  
     checkedAllFlag: this.state.checkedAllFlag
131.  
     })
132.  
     console.log(this.state.checkedAllFlag)
133.  
     }
134.  
     onsearch = (val) => {
135.  
     this.state.cardList = this.state.local.filter(item => item.name.includes(val.target.value))
136.  
     this.setState({
137.  
     cardList: this.state.cardList
138.  
     })
139.  
     }
140.  
      
141.  
     removeChecked = () => {
142.  
     this.state.cardList = this.state.cardList.filter(item => item.checked == false)
143.  
     this.state.checkedAllFlag = false
144.  
     console.log(this.state.cardList)
145.  
     this.setState({
146.  
     cardList: this.state.cardList,
147.  
     checkedAllFlag:this.state.checkedAllFlag
148.  
     })
149.  
     }
150.  
      
151.  
      
152.  
     render() {
153.  
     return <div className = 'box' > {
154.  
     /* 头部 */ } <
155.  
     div className = 'header' >
156.  
     <
157.  
     input onInput = {
158.  
     this.onsearch
159.  
     }
160.  
     placeholder = '输入内容进行查找'
161.  
     type = "text" / >
162.  
     <
163.  
     /div> {
164.  
     /* 列表 */ } <
165.  
     List editCheckedFlag = {
166.  
     this.editCheckedFlag
167.  
     }
168.  
     deleteData = {
169.  
     this.deleteData
170.  
     }
171.  
     editChecked = {
172.  
     this.editChecked
173.  
     }
174.  
     add = {
175.  
     this.add
176.  
     }
177.  
     sub = {
178.  
     this.sub
179.  
     }
180.  
     cardList = {
181.  
     this.state.cardList
182.  
     }
183.  
     /> {
184.  
     /* 底部 */ } <
185.  
     Footer removeChecked = {
186.  
     this.removeChecked
187.  
     }
188.  
     editCheckedFlag = {
189.  
     this.editCheckedFlag
190.  
     }
191.  
     checkedAllFlag = {
192.  
     this.state.checkedAllFlag
193.  
     }
194.  
     checkedAll = {
195.  
     this.checkedAll
196.  
     }
197.  
     cardList = {
198.  
     this.state.cardList
199.  
     }
200.  
     /> </div>
201.  
     }
202.  
     }

src/components/list.jsx组件

1.  
   import React from 'react'
2.  
    
3.  
   export default class list extends React.Component {
4.  
   constructor(props){
5.  
   super(props)
6.  
   }
7.  
   add = (val) => {
8.  
   let {add} = this.props
9.  
   console.log(val);
10.  
    add(val)
11.  
    }
12.  
    sub = (val) => {
13.  
    let {sub} = this.props
14.  
    console.log(val);
15.  
    sub(val)
16.  
    }
17.  
    editChecked = (val) => {
18.  
    let {editChecked,editCheckedFlag} = this.props
19.  
    editChecked(val)
20.  
    editCheckedFlag()
21.  
    }
22.  
    deleteData = (val) => {
23.  
    let {deleteData} = this.props
24.  
    deleteData(val)
25.  
    }
26.  
     
27.  
    render() {
28.  
    return <>
29.  
    <div className='list'>
30.  
    <div>状态</div>
31.  
    <div> 产品编号</div>
32.  
    <div> 产品展示</div>
33.  
    <div>展示名称</div>
34.  
    <div>购买数量</div>
35.  
    <div>产品单价</div>
36.  
    <div>产品总价</div>
37.  
    <div>操作</div>
38.  
    </div>
39.  
    {
40.  
    this.props.cardList.map((item,index) => {
41.  
    return <div key={index} className='list' >
42.  
    <div>
43.  
    <input onChange={this.editChecked.bind(this,item)} checked={item.checked} type="checkbox" name="" id="" />
44.  
    </div>
45.  
    <div>{index}</div>
46.  
    <div> <img src={item.img} alt="" /></div>
47.  
    <div>{item.name}</div>
48.  
    <div>
49.  
    <button onClick={this.sub.bind(this,item)}>-</button>
50.  
    <span>{ item.num}</span>
51.  
    <button onClick={this.add.bind(this,item)}> </button>
52.  
    </div>
53.  
    <div>
54.  
    {item.price}元
55.  
    </div>
56.  
    <div>
57.  
    {item.price * item.num }元
58.  
    </div>
59.  
    <div>
60.  
    <button onClick={this.deleteData.bind(this,item)}>删除</button>
61.  
    </div>
62.  
    </div>
63.  
    })
64.  
    }
65.  
    </>
66.  
    }
67.  
    }
68.  
     

src/components/footer.jsx组件

1.  
   import React from 'react'
2.  
    
3.  
   export default class list extends React.Component {
4.  
   constructor(props){
5.  
   super(props)
6.  
   }
7.  
   subNum = ()=> {
8.  
   return this.props.cardList.reduce((num,item) => num = item.checked && item.num * item.price ,0)
9.  
   }
10.  
    Num = ()=> {
11.  
    return this.props.cardList.reduce((num,item) => num = item.checked && item.num ,0)
12.  
    }
13.  
    // 更改全部状态
14.  
    checkedAll = (e) => {
15.  
    let { checkedAll ,editCheckedFlag} = this.props
16.  
    checkedAll(e.target.checked)
17.  
    editCheckedFlag()
18.  
    }
19.  
    // 删除列表
20.  
    removeChecked = (e) => {
21.  
    let { removeChecked } = this.props
22.  
    removeChecked()
23.  
    }
24.  
    render() {
25.  
    return <div className='footer'>
26.  
    <input onChange={this.checkedAll} checked={this.props.checkedAllFlag} type="checkbox" name="" id="" />
27.  
    <div>总计：{ this.subNum() }元 共 { this.Num()} 件商品 <button onClick={this.removeChecked.bind(this)} >批量删除</button></div>
28.  
    </div>
29.  
    }
30.  
    }
31.  
     

App.css

1.  
   *{
2.  
   padding: 0;
3.  
   margin: 0;
4.  
   }
5.  
   .header{
6.  
   width: 100%;
7.  
   height: 40px;
8.  
   border-bottom: 1px solid #000;
9.  
   display: flex;
10.  
    align-items: center;
11.  
    justify-content: center;
12.  
    }
13.  
    .header input {
14.  
    border: 1px solid rgb(53, 51, 51);
15.  
    width: 200px;
16.  
    height: 30px;
17.  
    }
18.  
    .box{
19.  
    width: 1500px;
20.  
    height: 800px;
21.  
    background-color: pink;
22.  
    padding: 20px;
23.  
    border-radius: 20px;
24.  
    margin:20px auto;
25.  
    }
26.  
    .list{
27.  
    width: 100%;
28.  
    height: 90px;
29.  
    border-bottom: 1px solid rgb(179, 174, 174);
30.  
    display: flex;
31.  
    align-items: center;
32.  
    }
33.  
    .list img {
34.  
    width: 80px;
35.  
    height: 80px;
36.  
    border-radius: 50%;
37.  
    }
38.  
    .list div{
39.  
    width: 260px;
40.  
    line-height:90px ;
41.  
    height: 100%;
42.  
    }
43.  
    .list button{
44.  
    width: 60px;
45.  
    height: 30px;
46.  
    }
47.  
    .list span {
48.  
    width: 40px;
49.  
    text-align: center;
50.  
    display: inline-block;
51.  
    }
52.  
    .bg{
53.  
    background-color: rgb(246, 242, 242);
54.  
    }
55.  
    .footer{
56.  
    width: 100%;
57.  
    height: 90px;
58.  
    display: flex;
59.  
    align-items: center;
60.  
    }
61.  
    input {
62.  
    width: 20px;
63.  
    height: 20px;
64.  
    }

szh

这篇好文章是转载于：学新通技术网