ReactJS实现按钮仅单次递减计数：重复点击不再触发递减

要实现点击按钮仅让count递减一次、重复点击无效的需求，核心是加一个状态来标记按钮是否已经触发过递减操作，具体实现如下：

函数组件方案（React Hooks） #

import { useState } from 'react';

function SingleDecrementCounter() {
  // 计数状态
  const [count, setCount] = useState(10);
  // 标记按钮是否已被点击过
  const [hasDecremented, setHasDecremented] = useState(false);

  const handleDecrement = () => {
    // 仅当未点击过时执行递减逻辑
    if (!hasDecremented) {
      // 使用函数式更新确保获取最新的count值
      setCount(prev => prev - 1);
      // 标记为已点击，后续点击不再触发
      setHasDecremented(true);
    }
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      {/* 点击后禁用按钮，同时修改按钮文本提升用户体验 */}
      <button 
        onClick={handleDecrement} 
        disabled={hasDecremented}
      >
        {hasDecremented ? '已完成递减' : '点击递减一次'}
      </button>
    </div>
  );
}

export default SingleDecrementCounter;

关键逻辑说明 #

• 新增hasDecremented状态追踪按钮的点击状态，初始值为false
• 点击事件中先判断hasDecremented，只有为false时才执行count递减，并将状态设为true
• 给按钮添加disabled属性，点击后直接禁用按钮，既避免无效点击，也能从UI层面明确告知用户操作状态

类组件方案（兼容旧版本React） #

如果是用类组件开发，思路完全一致：

import React, { Component } from 'react';

class SingleDecrementCounter extends Component {
  state = {
    count: 10,
    hasDecremented: false
  };

  handleDecrement = () => {
    const { hasDecremented } = this.state;
    if (!hasDecremented) {
      this.setState(prevState => ({
        count: prevState.count - 1,
        hasDecremented: true
      }));
    }
  };

  render() {
    const { count, hasDecremented } = this.state;
    return (
      <div>
        <p>当前计数: {count}</p>
        <button 
          onClick={this.handleDecrement} 
          disabled={hasDecremented}
        >
          {hasDecremented ? '已完成递减' : '点击递减一次'}
        </button>
      </div>
    );
  }
}

export default SingleDecrementCounter;

这样处理后，不管怎么连续点击按钮，count只会被递减一次，完全符合需求。

内容的提问来源于stack exchange，提问作者Sneha