react 之自添加属性并获取

react小项目–购物车

效果图如下：

如图所示 美其名曰购物车，实际是一个粗糙的步进器
然后带一丢算法 得出总价
每次‘+’或者“-”的时候 被禁用的输入框默认值会改变
但是在默认值为0是 点击‘-’无效

• 当时想的思路，在点击‘+’，“-”按钮时怎么获取输入框的值 卡壳了

直到*data-id创建属性， 当点击‘-’或‘+’时 函数操作使用e.target.dataset.id获取值

代码如下：

// 环境 react脚手架 
//   jsx抽离
         list(){
             return(
               this.state.list.map((item)=>{return(
                   <li key={item.id}>
                  <span>${item.price}</span><span>{item.goods}</span>
                   <button onClick={this.decrease} data-id={item.id} >-</button > 
                   <input type="text" value={item.x} disabled />
                   <button onClick={this.increase} data-id={item.id}>+</button>
                   <span>$=={item.sum}</span></li>)
                   }
                   )
             )
         }
 //   当点击‘+’
         increase=(e)=>{
           const n=e.target.dataset.id;
           const {list}=this.state
               // console.log(list,'...',n);
      list.map((item)=>{
                   if(item.id===Number(n)){
                       item.x++
                       console.log(item.x);
                   item.sum=item.price*item.x}
                   return 0;
                   //此处疑问哈 标记 必须得return哈子 等有空了再瞅瞅
               })
          this.setState({
              list
          })
         }
           //   当点击‘-’
         decrease=(e)=>{
           const n=e.target.dataset.id;
           const {list}=this.state
               // console.log(list,'...',n);                
      list.map((item)=>{
                   if(item.id===Number(n)){
                       if(item.x===0)return false
                       item.x--
                       console.log(item.x);
                   item.sum=item.price*item.x}
                   return 0;
               })
          this.setState({
              list
          })
         // const {list}=this.state
       }