组件相关目录

表格是放于ComA.js里处理渲染，总价和总数量放于ComB.js里处理渲染

App.js代码

import './App.css';
import ComA from "./components/ComA"
import ComB from "./components/ComB"
import React from "react"

class App extends React.Component{
  constructor(){
    super()
    this.state={
      booklist:[
        {
          id:1,
          bookName:"小红书",
          bookPrice:18,
          bookNum:1,
          checked:false
        },{
          id:2,
          bookName:"小兰书",
          bookPrice:15,
          bookNum:1,
          checked:false
        },{
          id:3,
          bookName:"小黑书",
          bookPrice:20,
          bookNum:1,
          checked:false
        },{
          id:4,
          bookName:"小白书",
          bookPrice:12,
          bookNum:1,
          checked:false
        }
      ],
      totalPrice:0,
      totalNum:0,
      allChecked:false
    }
  }
  //子组件ComA减数量按钮操作
  mulNum(i){
    let list = [...this.state.booklist]
    list[i].bookNum--;
    this.setState({
      booklist:list
    })
    this.getToTal()
  }
  //子组件ComA加数量按钮操作
  addNum(i){
    let list = [...this.state.booklist]
    list[i].bookNum++;
    this.setState({
      booklist:list
    })
    this.getToTal()
  }
  //子组件ComA删除按钮操作
  delBook(i){
    let list = [...this.state.booklist];
    if(list[i].checked){
      list[i].checked = !list[i].checked;
    }
    list.splice(i,1)
    this.setState({
      booklist:list
    })
    this.getToTal()
  }
  //子组件ComA单选按钮操作
  singleCheck(i){
    let list = [...this.state.booklist]
    list[i].checked = !list[i].checked;
    let allChecked = this.state.allChecked;
    let tag = list.every((item)=>{return item.checked})
    allChecked = tag;
    this.setState({
      booklist:list,
      allChecked:allChecked
    })
    this.getToTal()
  }
    //子组件ComA全选按钮操作
  allCheck(){
    let list = [...this.state.booklist]
    let allChecked = !this.state.allChecked
    list.map((item)=>{item.checked = allChecked})
    this.setState({
      booklist:list,
      allChecked:allChecked
    })
    this.getToTal()
  }
  //子组件ComB计算总价和总数
  getToTal(){
    let list = [...this.state.booklist];
    let total = 0;
    let num = 0;
    let newlist = list.filter((item)=>{return item.checked == true});
    newlist.map((item)=>{
      total += item.bookPrice * item.bookNum
      num += item.bookNum
    })
    this.setState({
      totalPrice:total,
      totalNum:num
    })
  }
  componentWillMount(){
    this.getToTal()
  }
  render(){
     return (
    <div className="App">
     <h3>简易购物车</h3>
     <ComA data={this.state.booklist} 
     mulNum={this.mulNum.bind(this)}
     addNum={this.addNum.bind(this)}
     delBook={this.delBook.bind(this)}
     singleCheck={this.singleCheck.bind(this)}
     allCheck={this.allCheck.bind(this)}
      allChecked={this.state.allChecked} 
     ></ComA>
     <ComB totalPrice={this.state.totalPrice} 
          totalNum={this.state.totalNum}></ComB>
    </div>
  );
  }
}


export default App;

ComA.js代码

import React from "react"
import "../assets/css/ComA.css"
class ComA extends React.Component{
    render(){
        return(
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" checked={this.props.allChecked} onChange={()=>{
                            this.props.allCheck()
                        }}/></th>
                        <th>编号</th>
                        <th>书名</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.data.map((item,index)=>{
                    return(<tr key={item.id}>
                        <td><input type="checkbox" checked={item.checked} onChange={(e)=>{
                            this.props.singleCheck(index)
                        }}/></td>
                        <td>{item.id}</td>
                        <td>{item.bookName}</td>
                        <td>{item.bookPrice}</td>
                        <td>
                            <button disabled={item.bookNum===1?true:false}
                            onClick={()=>{this.props.mulNum(index)
                            }}>-</button>
                            {item.bookNum}
                            <button onClick={()=>{
                                this.props.addNum(index)
                            }}>+</button>
                        </td>
                        <td>
                            <button>编辑</button>
                            <button
                            onClick={()=>{
                                this.props.delBook(index)
                            }}>删除</button>
                        </td>
                   </tr>)
                })}
                </tbody>
            </table>
        )
    }
}
export default ComA;

ComA.css样式

tr,th,td{border:1px solid #000;padding:10px;}
table{width: 600px;margin: 0 auto;border-collapse:collapse}
td>button{height: 28px;}

ComB.js代码

import React from "react"
class ComB extends React.Component{
    render(){
        return(
            <div>
                总价格：{this.props.totalPrice}
                总数量：{this.props.totalNum}
            </div>
        )
    }
}
export default ComB;

刚学react，多多分享，每天进步一点点，编辑功能没写