Reactjs 是否将onIncrement（）和onDecrement（）减少为1个函数？

我正在编写一个计数器应用程序。所以我想用onChange函数替换onIncrement，onDecrement函数

我想删除onIncrement和onDecrement函数。然后我想添加新的onChange函数

onChange函数应采用单个参数，它可以递减或递增计数器

我的代码：

const Counter = props => {
  const { onIncrement, onDecrement, count, index } = props;

  return (
    <div className="counter">
      <b>{count}</b>
      <div className="counter-controls">
        <button
          onClick={() => onDecrement(index)}
          className="button is-danger is-small"
        >
          -
        </button>
        <button
          onClick={() => onIncrement(index)}
          className="button is-success is-small"
        >
          +
        </button>
      </div>
    </div>
  );
};

const Total = props => {
  const { sum } = props;
  return (
    <div>
      <p>Total: {sum} </p>
    </div>
  );
};

export default function App() {
  const [data, setData] = useState([
    { id: 1, value: 0 },
    { id: 2, value: 0 },
    { id: 3, value: 0 }
  ]);

  const total = data.map(item => item.value).reduce((p, n) => p + n);

  const [sum, setSum] = useState(total);

  const handleIncrement = index => {
    const clone = [...data];
    clone[index - 1].value += 1;
    setData(clone);
    setSum(sum + 1);
  };
  const handleDecrement = index => {
    const clone = [...data];
    clone[index - 1].value -= 1;
    setData(clone);
    setSum(sum - 1);
  };


  return (
    <div className="App">
      {data.map(counter => (
        <Counter
          key={counter.id}
          onIncrement={handleIncrement}
          onDecrement={handleDecrement}
          index={counter.id}
          count={counter.value}
        />
      ))}
      <Total sum={sum} />
    </div>
  );
}

const Counter=props=>{
const{onIncrement，onDecrement，count，index}=props；
返回(
{count}
onDecrement（索引）}
className=“按钮是危险的，但危险很小”
>
-
onIncrement（索引）}
className=“按钮是成功的小”
>
+
);
};
常量总计=道具=>{
常量{sum}=props；
返回(
总计：{sum}

);
};
导出默认函数App（）{
const[data，setData]=useState([
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}
]);
const total=data.map（item=>item.value）.reduce（（p，n）=>p+n）；
const[总和，集合]=使用状态（总计）；
常量handleIncrement=索引=>{
常量克隆=[…数据]；
克隆[index-1]。值+=1；
setData（克隆）；
设定值（总和+1）；
};
const handleDecrement=索引=>{
常量克隆=[…数据]；
克隆[index-1]。值-=1；
setData（克隆）；
设定值（总和-1）；
};
返回(
{data.map（计数器=>(
))}
);
}

您可以编写一个onChange函数，并在调用该函数时传递更改值。使用changeValue添加到以前的数据中。对于减量执行，更改值将为

-1

，对于

增量

，更改值将为

+1

const Counter = props => {
  const { onChange, count, index } = props;

  return (
    <div className="counter">
      <b>{count}</b>
      <div className="counter-controls">
        <button
          onClick={() => onChange(index, -1)}
          className="button is-danger is-small"
        >
          -
        </button>
        <button
          onClick={() => onChange(index, 1)}
          className="button is-success is-small"
        >
          +
        </button>
      </div>
    </div>
  );
};

const Total = props => {
  const { sum } = props;
  return (
    <div>
      <p>Total: {sum} </p>
    </div>
  );
};

export default function App() {
  const [data, setData] = useState([
    { id: 1, value: 0 },
    { id: 2, value: 0 },
    { id: 3, value: 0 }
  ]);

  const total = data.map(item => item.value).reduce((p, n) => p + n);

  const [sum, setSum] = useState(total);

  const handleChange = (index, changeValue) => {
    const clone = [...data];
    clone[index - 1].value += changeValue;
    setData(clone);
    setSum(prevSum = prevSum + changeValue);
  };


  return (
    <div className="App">
      {data.map(counter => (
        <Counter
          key={counter.id}
          onChange={handleChange}
          index={counter.id}
          count={counter.value}
        />
      ))}
      <Total sum={sum} />
    </div>
  );
}

const Counter=props=>{
const{onChange，count，index}=props；
返回(
{count}
onChange（索引，-1）}
className=“按钮是危险的，但危险很小”
>
-
onChange（索引，1）}
className=“按钮是成功的小”
>
+
);
};
常量总计=道具=>{
常量{sum}=props；
返回(
总计：{sum}

);
};
导出默认函数App（）{
const[data，setData]=useState([
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}
]);
const total=data.map（item=>item.value）.reduce（（p，n）=>p+n）；
const[总和，集合]=使用状态（总计）；
常量handleChange=（索引，changeValue）=>{
常量克隆=[…数据]；
克隆[index-1]。值+=changeValue；
setData（克隆）；
设置值（prevSum=prevSum+changeValue）；
};
返回(
{data.map（计数器=>(
))}
);
}