在使用接口数据的情况下要引入，当然在下方还有不需要接口的加减事件，可以耐心地看下去。
import axios from "axios";
下方是示例
在有更新接口的情况下直接写就好了，很简单
html
1. <button className='demo-icon' gap={30}>减</button> 2. <input type="text" value={s.num} /> 3. <button className='demo-icon' onClick={()=>{jia(s.id,s.num)}} gap={30} >加</button>
js：接口就不放了
通过上面的点击事件传他的id和数量，num就是他的数量
他的减事件一样在这里就不写了
1. function jia(id,num) { 2. console.log(id); 3. console.log(num); 4. let a = num+1 5. axios({ 6. url: "接口数据", // url 7. params: { 8. // 参数 9. id:id,//id 10. num:a //新数量 11. }, 12. }).then(function (res) { 13. console.log(res, "试一下"); // 成功回调 14. }); 15. }
下面是不需要接口的加减事件
首先需要先引入自己需要的东西
也就是从react身上导入以下几个属性
import React, { useState,useCallback } from "react";
接着就是在html里面创建点击事件
其实也不用这么多标签，字需要一个input和两个按钮就可以实现
1. <div> 2. <div > 3. <center> <div> 4. <button onClick={handleClick_jian_gwc}>减</button> 5. {/* onChange={()=>fun()} */} 6. <input type="text" value={cssr_gwc} 7. style={{width:'40px'}} 8. /> 9. <button onClick={handleClick_gwc}>加</button> 10. </div></center> 11. </div> 12. </div>
JS部分
首先先让input的value为0
const [cssr_gwc, setCssr_gwc] = useState(0);
加事件
当点击加事件的时候触发
其实也就是创建一个变量，当点击的时候将这个值抛给他，就如下面的加1，减的话也是一样。
1. const handleClick_gwc = useCallback((event) => { 2. let fen = cssr_gwc; 3. setCssr_gwc(fen + 1) 4. console.log('购买+1'); 5. }, [cssr_gwc]);
减事件
1. const handleClick_jian_gwc = useCallback((event) => { 2. let fen = cssr_gwc; 3. setCssr_gwc(fen - 1) 4. console.log('购买-1'); 5. }, [cssr_gwc]);
全部代码部分
1. 2. 3. import React, { useState,useCallback } from "react"; 4. 5. 6. export default function Lianxi() { 7. 8. const [cssr_gwc, setCssr_gwc] = useState(0); 9. const handleClick_gwc = useCallback((event) => { 10. let fen = cssr_gwc; 11. setCssr_gwc(fen + 1) 12. console.log('购买+1'); 13. }, [cssr_gwc]); 14. const handleClick_jian_gwc = useCallback((event) => { 15. let fen = cssr_gwc; 16. setCssr_gwc(fen - 1) 17. console.log('购买-1'); 18. }, [cssr_gwc]); 19. 20. 21. return ( 22. <div> 23. 24. <div > 25. <center> <div> 26. <button onClick={handleClick_jian_gwc}>减</button> 27. {/* onChange={()=>fun()} */} 28. <input type="text" value={cssr_gwc} 29. style={{width:'40px'}} 30. /> 31. <button onClick={handleClick_gwc}>加</button> 32. </div></center> 33. 34. </div> 35. 36. 37. </div> 38. ) 39. }
