React 中购物车功能实现(数量加减功能的实现)

样式的实现：

import React, { Component } from 'react'
import "./Page.css"

export default class Page extends Component {
  state = {
    arr: [
      { id: 1, goodName: '杨枝甘露', goodPrice: 20,num: 1 },
      { id: 2, goodName: '森林玫果', goodPrice: 30 ,num: 1},
      { id: 3, goodName: '烤奶', goodPrice: 15,num: 1 }
    ],
    allChecked: false
  }

  checkNum = 0

  itemChange = (event, e) => {
    const checked = event.target.checked;
    const { arr } = this.state;
    e.checked = checked;
    if (checked) {
      this.checkNum++;
    } else {
      this.checkNum--;
    }
    if (this.checkNum === arr.length) {
      this.setState({
        allChecked: true
      })
    } else {
      this.setState({
        allChecked: false
      })
    }
  }

  allChose = e => {
    const checked = e.target.checked;
    const {arr} = this.state;
    this.setState({
      allChecked: checked
    })
    arr.map(e => e.checked = checked)
   
    this.setState({
      arr
    })
    if(checked){
      this.checkNum = arr.length;
    }else{
      this.checkNum = 0
    }
  }

  test = ()=>{
    console.log('');
  }


  render() {
    const { arr } = this.state;
    return (
      <div className='Box'>
        <li>
          <input type="checkbox" style={{ marginRight: '10px' }} checked={this.state.allChecked} onChange={this.allChose} />全选
        </li>
        {
          arr.map(e =>
            <li key={e.id}>
              <input type="checkbox" style={{ marginRight: '10px' }} checked={e.checked || false} onChange={(event) => this.itemChange(event, e)} />
              <span>{`商品名称：${e.goodName}`}</span>
              <span>{`单价：${e.goodPrice}`}</span>
              <button onClick={() =>this.subNum(e)}>-</button>
              <input type="text" className='num_box' value={e.num} onChange={this.test}/>
              <button  onClick={() =>this.addNum(e)}>+</button>
            </li>
          )
        }
        <div className='foot'>
          <p style={{ fontSize: '18px', textAlign: 'right' }}>结算： ￥169</p>
        </div>


      </div>
    )
  }
}

问题分析：

由于在布局的时候使用数组渲染的页面，如果给input框中的value是定值的话，会出现点击单个加减同时更改多个value的情况，为了避免这种问题的出现，我讲input框中的值与数据中对应的num绑定，这样我就只需要通过函数更改对应对象数据中的num值，来达到效果

我的实现思路：

1、将input框中的value与state中的数据进行绑定
2、设置对应的加减函数来对单独的对象中num进行修改
3、页面重新渲染，达到效果
加减按钮触发的函数逻辑类似，这里举出加法的函数：

addNum = e =>{
    const {arr} = this.state;
    arr.forEach(k => {
      if(k.id === e.id){
        k.num = e.num + 1
      }
    })
    this.setState({
      arr
    })
  }