react加减事件

在使用接口数据的情况下要引入，当然在下方还有不需要接口的加减事件，可以耐心地看下去。

import axios from "axios";

下方是示例

在有更新接口的情况下直接写就好了，很简单

html

<button className='demo-icon' gap={30}>减</button>
<input type="text" value={s.num} />
<button className='demo-icon' onClick={()=>{jia(s.id,s.num)}} gap={30} >加</button>

js：接口就不放了

通过上面的点击事件传他的id和数量，num就是他的数量

他的减事件一样在这里就不写了

function jia(id,num) {
console.log(id);
console.log(num);
let a = num+1
  axios({
    url: "接口数据", // url
    params: {
      // 参数
      id:id,//id			
      num:a	//新数量		
    },
  }).then(function (res) {
    console.log(res, "试一下"); // 成功回调
  });
}

下面是不需要接口的加减事件

首先需要先引入自己需要的东西

也就是从react身上导入以下几个属性

import React, { useState,useCallback } from "react";

接着就是在html里面创建点击事件

其实也不用这么多标签，字需要一个input和两个按钮就可以实现

    <div>
      <div >
        <center> <div>
                <button onClick={handleClick_jian_gwc}>减</button>
                {/* onChange={()=>fun()} */}
                <input type="text" value={cssr_gwc}
                style={{width:'40px'}}
               />
                <button onClick={handleClick_gwc}>加</button>
            </div></center>
            </div>
    </div>

JS部分

首先先让input的value为0

const [cssr_gwc, setCssr_gwc] = useState(0);

加事件

当点击加事件的时候触发

其实也就是创建一个变量，当点击的时候将这个值抛给他，就如下面的加1，减的话也是一样。

  const handleClick_gwc = useCallback((event) => {
      let fen = cssr_gwc;
      setCssr_gwc(fen + 1)
      console.log('购买+1');
    }, [cssr_gwc]);

减事件

  const handleClick_jian_gwc = useCallback((event) => {
      let fen = cssr_gwc;
      setCssr_gwc(fen - 1)
      console.log('购买-1');
    }, [cssr_gwc]);

全部代码部分

import React, { useState,useCallback } from "react";


export default function Lianxi() {

  const [cssr_gwc, setCssr_gwc] = useState(0);
  const handleClick_gwc = useCallback((event) => {
      let fen = cssr_gwc;
      setCssr_gwc(fen + 1)
      console.log('购买+1');
    }, [cssr_gwc]);
  const handleClick_jian_gwc = useCallback((event) => {
      let fen = cssr_gwc;
      setCssr_gwc(fen - 1)
      console.log('购买-1');
    }, [cssr_gwc]);


  return (
    <div>
      
      <div >
        <center> <div>
                <button onClick={handleClick_jian_gwc}>减</button>
                {/* onChange={()=>fun()} */}
                <input type="text" value={cssr_gwc}
                style={{width:'40px'}}
               />
                <button onClick={handleClick_gwc}>加</button>
            </div></center>
           
            </div>


    </div>
  )
}