时间戳

首页 > 解决方案 > 如何使用 React 钩子在动态事件处理程序中增加值？

reactjs - 如何使用 React 钩子在动态事件处理程序中增加值？

问题描述

我有一个 4 个方格，每个方格都有各自的状态。附加到每个方块的是一个动态事件处理程序，它将增加它们各自的状态。我没有正确实现动态逻辑，因为单击正方形按钮时状态不会增加。我究竟做错了什么？

export const Board = () => {
  const [squares, setSquares] = useState({
    squareOne: 0,
    squareTwo: 0,
    squareThree: 0,
    squareFour: 0
  });

  const handleIncrement = (event) => {
    const {
      target: { name, value }
    } = event;
    setSquares({ ...squares, [name]: value + 1 });
  };

  return (
    <div className="board">
      <Square value={squares.squareOne} increment={handleIncrement} />
      <Square value={squares.squareTwo} increment={handleIncrement} />
      <Square value={squares.squareThree} increment={handleIncrement} />
      <Square value={squares.squareFour} increment={handleIncrement} />
    </div>
  );
};

export const Square = ({ value, increment }) => {
  return <button onClick={increment}>{value}</button>;
};

标签： reactjs

解决方案

  export const Board = () => {
  const [squares, setSquares] = useState({
    squareOne: 0,
    squareTwo: 0,
    squareThree: 0,
    squareFour: 0
  });

  const handleIncrement = (name) => () => {
    setSquares({ ...squares, [name]: squares[name] + 1 });
  };

  return (
    <div className="board">
      <Square value={squares.squareOne} increment={handleIncrement('squareOne')} />
      <Square value={squares.squareTwo} increment={handleIncrement('squareTwo')} />
      <Square value={squares.squareThree} increment={handleIncrement('squareThree')} />
      <Square value={squares.squareFour} increment={handleIncrement('squareFour')} />
    </div>
  );
};

export const Square = ({ value, increment }) => {
  return <button onClick={increment}>{value}</button>;
};

您没有使用 name 属性。在解决方案句柄中，增量获取名称并返回一个函数，该函数将通过使用“闭包”来增加该部分状态。这样您的代码将正常工作。

推荐阅读