一个购物车内商品列表,商品A,B,C....
修改A的购买数量,但不点击A的确定按钮,反之点击B的确定按钮,
实际应该是页面刷新后,A和B的购买数量会回到没有修改之前的数量。
因为没有保存A,B的数量也未修改。
onChange 和onClick 改如何实现
{
this.state.list.map((value,key)=>{
return<div key={key}>
<img width={280} src={value.pic} style = {{float:"left"}}/>
<div style = {{textAlign:"left"}}>
<h1>{value.itemName}</h1>
所属:{value.szk}<br/>
库存:{value.storage}<br/>
价格:{value.price}元<br/>
<br/>
<div>
购买数量: <input type = "text" defaultValue = {value.count} onChange = {this.handleCount} style = {{width:"50px"}}/>
<Button onClick = {()=>this.doChange(value.id,this.state.count,value.storage)} >修改</Button>
<Button onClick = {()=>this.doDelete(value.id)} >删除</Button>
</div>
</div>
</div>
})
}
handleCount=(e)=>{
this.setState({
count:e.target.value
})
}
doChange=(id,count,storage)=>{
this.setState({
count:null
})
const result = /^\d+$/.test(count)
console.log(id,count,storage)
if(count!=null){
if(result){
if(eval(storage)>=eval(count)){
axios.put("/change",`id=${id}&count=${count}`)
.then((res)=>{
this.getData()
this.forceUpdate()
})
.catch((error)=>{
console.log(error)
})
}else{
alert("库存不够")
}
}else{
alert("只能输入数字")
}
}else{
console.log("请输入新的数量")
}
}
现在的实际效果是,改完A,点击B的确认,会把A改完后的数量赋值给了B的数量,确认按钮按下后也没有反应修改后的内容。
doChange里传入的是this.state.count的原因导致A的值给了B,所以想知道
handleCount和doChange函数应该怎么写。
最好可以直接给handleCount和doChangede代码