当前位置：首页 > React

react实现按钮点击增加

2026-01-27 17:35:06React

实现按钮点击增加功能

在React中实现按钮点击增加功能，可以通过状态管理来跟踪计数器的值，并在按钮点击时更新状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={handleIncrement}>增加</button>
    </div>
  );
}

export default Counter;

使用函数式更新

为了避免状态更新的异步问题，可以使用函数式更新方式，确保总是基于最新的状态值进行更新。

react实现按钮点击增加

const handleIncrement = () => {
  setCount(prevCount => prevCount + 1);
};

增加步长参数

如果需要每次增加特定的步长，可以扩展功能以支持自定义增量值。

react实现按钮点击增加

function Counter({ step = 1 }) {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(prevCount => prevCount + step);
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={handleIncrement}>增加 {step}</button>
    </div>
  );
}

添加减少功能

扩展计数器功能，支持增加和减少操作。

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={handleIncrement}>增加</button>
      <button onClick={handleDecrement}>减少</button>
    </div>
  );
}

使用自定义Hook

将计数器逻辑提取为自定义Hook，提高代码复用性。

function useCounter(initialValue = 0, step = 1) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + step);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - step);
  };

  return { count, increment, decrement };
}

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

以上方法提供了不同复杂度的实现方式，可以根据具体需求选择适合的方案。