• App.js ```javascript import React, { Component } from ‘react’; import ‘./App.css’; import { Checkbox, InputNumber, Button } from ‘antd’; class Carts extends Component { constructor(props) { super(props); this.state = {
      1. products: [],
      2. checkedAll:true
      } } render() { return (
      1. <div className="center container">
      2.   <h2>购物车</h2>
      3.   <table className="table table-hover">
      4.     <thead>
      5.       <tr>
      6.         <th>全选<Checkbox onChange={this.onCheckAll} checked={this.state.checkedAll}></Checkbox></th>
      7.         <th>商品</th>
      8.         <th>单价</th>
      9.         <th>数量</th>
      10.         <th>小计</th>
      11.         <th>操作</th>
      12.       </tr>
      13.     </thead>
      14.     <tbody>
      15.       {this.state.products.map(item => {
      16.         return (<tr key={item.id}>
      17.           <td>
      18.             <Checkbox onChange={this.onCheck.bind(this,item.id)} checked={item.isSelected}></Checkbox>
      19.           </td>
      20.           <td className="produce">
      21.             <img src={item.productCover} />
      22.             <p className="title">{item.productName}</p>
      23.           </td>
      24.           <td>
      25.             <div className="price">{item.productPrice}</div>
      26.           </td>
      27.           <td>
      28.             <InputNumber size="small" min={1} defaultValue={item.productCount} onChange={this.onChange.bind(this, item.id)} />
      29.           </td>
      30.           <td>
      31.             <div>${this.Subtotal(item.productPrice, item.productCount)}</div>
      32.           </td>
      33.           <td>
      34.             <Button className="btn" onClick={this.handleDel.bind(this,item)}>删除</Button>
      35.           </td>
      36.         </tr>)
      37.       })}
      38.     </tbody>
      39.   </table>
      40.     <p>总价: {this.sum()}</p>
      41. </div>
      ); } componentDidMount() { this.axios.get(‘http://yapi.demo.qunar.com/mock/34830/carts').then(res => {
      1. this.setState({
      2.   products: res.data
      3. })
      }) } onChange(id, e) { var products = this.state.products products.forEach(item => {
      1. if (item.id == id) {
      2.   item.productCount = e
      3. }
      }) this.setState({
      1. products
      }) } handleDel(item){ var products = this.state.products.filter(value=>value!==item) this.setState({
      1. products:products
      }) } onCheck(id,e){ var products = this.state.products products.forEach(item=>{
      1. if(item.id==id){
      2.   item.isSelected = e.target.checked
      3. }
      }) this.setState({
      1. products
      }) this.get() } onCheckAll=(e)=>{ var checkedAll = this.state.checkedAll this.setState({
      1. checkedAll:!checkedAll
      }) this.set(e.target.checked) } get(){ var products = this.state.products var checkedAll = products.every(item=>item.isSelected) this.setState({
      1. checkedAll
      }) } set(val){ var products = this.state.products products.forEach(item=>item.isSelected = val) this.setState({
      1. products
      }) } Subtotal(a, b) { return (a * b).toFixed(2) } sum() { var products = this.state.products var total = 0; for (let i = 0; i < products.length; i++) {
      1. if (products[i].isSelected) {
      2.   total =
      3.     total +
      4.     products[i].productCount * products[i].productPrice;
      5. } else {
      6.   continue;
      7. }
      } return total.toFixed(2) } } export default Carts;
    2. - App.css
    3. ```javascript
    4. .center{
    5.   margin: 20px auto;
    6.   text-align: center;
    7. }
    8. .container{
    9.   width: 850px;
    10. }
    11. img{
    12.   width: 100px;height: 150px;
    13. }
    15. th,td{
    16.   padding: 0 30px; 
    17. }
    18. table{
    19.   border: 1px solid#eee;
    20. }
    21. .price{
    22.   width: 100px;
    23.   border: 1px solid #eee;
    24. }
    25. .btn{
    26.   background: crimson;
    27.   color: white;
    28.   border: none;
    29.   font-size: 14px;
    30. }