react如何实现购物车单独计数？

Question

现在是点击一个数量都在改变，求解？

import React, { Component } from 'react';
import axios from 'axios';
import Loading from './../public/loading';
import Active from './../index/Active';
// import {jia,jian} from './../../redux/action';
// import { connect } from 'react-redux';
class Buy extends Component {
  constructor(props){
    super(props);
    this.state = {
      loadingFlag:true,
      cartList:[],
      defaultVal:1
    };
    this.showNum = this.showNum.bind(this);
    this.delList = this.delList.bind(this);
    this.numAdd = this.numAdd.bind(this);
    this.numDel = this.numDel.bind(this);
  }
  componentDidMount(){
    this.setState({
      loadingFlag:false
    });
    let _this = this;
    axios.get('./data/test.json').then(function (response) {
      console.log(response);
      _this.setState({
        cartList:response.data.cartList
      });
    }).catch(function (error) {
      console.log(error);
    });
  }
  showNum(e){
    console.log(e.target.value);
  }
  delList(e){
    let lId = e.target.getAttribute("data-id");
    let cartLists = this.state.cartList;
    this.state.cartList.forEach((item,i) => {
      if(lId === item.id){
        cartLists.splice(i,1);
      }
    })
    console.log(cartLists);
    this.setState({
      cartList:cartLists
    });
  }
  numAdd(){
    this.setState({
      defaultVal:++this.state.defaultVal
    });
    console.log(this.state.defaultVal);
  }
  numDel(){
    this.setState({
      defaultVal:--this.state.defaultVal
    });
    console.log(this.state.defaultVal);
  }
  render() {
    // const { PayIncrease, PayDecrease } = this.props;
    return (
      <div className="buy">
        <Loading loadingFlag = {this.state.loadingFlag} />
        <h1 className="buy-h1">我的购物车</h1>
        <div className="buy-box">
          <div className="buy-none" style={{display:'none'}}>
            <i className="iconfont icon-gouwuche"></i>
            <p>您的购物车是空的，赶紧选购吧～</p>
            <button>去逛逛</button>
          </div>
          <div className="buy-has" key="1">
              <ul>
                  {this.state.cartList.map((item) => {
                    return (
                      <li key={item.id}>
                        <div className="radio">
                          <input type="checkbox" />
                        </div>
                        <div className="img">
                          <img src={item.img} alt={item.name} />
                        </div>
                        <div className="info">
                          <p>{item.name}</p>
                          <p>{item.color} {item.memory}</p>
                          <p>￥{item.price}</p>
                          <div className="num">
                              <input type="button" defaultValue="-" onClick={this.numDel} />
                              <input type="number" className="nums" value={this.state.defaultVal} onChange={(e) => this.showNum(e)} />
                              <input type="button" defaultValue="+" onClick={this.numAdd} />
                          </div>
                        </div>
                        <div className="del"><i data-id={item.id} className="iconfont icon-guanbi" onClick={(e) => this.delList(e)}></i></div>
                      </li>
                    )
                  })}
              </ul>
              <div className="bottom-cart">
                <span className="b-handle"><input type="radio" /><em>全选</em></span>
                <span className="b-price">总计：￥4699.00<br />（邮费:包邮）</span>
                <span className="b-pay">
                  <a href="/">结算(0)</a>
                </span>
              </div>
          </div>
        </div>
        <Active name="商品推荐" />
      </div>
    );
  }
}

//需要渲染什么数据
// function mapStateToProps(state) {
//   return {
//       num:state
//   }
// }
//需要触发什么行为
// function mapDispatchToProps(dispatch) {
//   return {
//       PayIncrease: () => dispatch(jia),
//       PayDecrease: () => dispatch(jian)
//   }
// }
export default Buy;
// export default connect(mapStateToProps, mapDispatchToProps)(Buy);

Answer 1

<input type="number" className="nums" value={this.state.defaultVal} onChange={(e) => this.showNum(e)} />

你所有的值都绑定的同一个状态，当然一起变啦。
要么就 map 的时候多拿个 index 然后状态里要开响应长度的数组再去存取。