如何实现无法通过浏览器审查元素篡改的按钮禁用效果？

由于前端DOM层面的属性（比如disabled）、CSS样式（比如pointer-events: none）都可以通过浏览器开发者工具修改，所以要从业务逻辑层做拦截，这是唯一能避免被篡改的可靠方案，具体实现如下：

1. 用状态记录按钮的可点击状态 #

在组件中维护一个状态对象，专门标记每个按钮是否允许点击（利用按钮的tile唯一标识做键）：

import { useState, useEffect } from 'react';

// 假设你有一个tiles数组存储所有按钮的唯一标识
const [clickableStatus, setClickableStatus] = useState({});

// 初始化所有按钮为可点击状态
useEffect(() => {
  const initialStatus = tiles.reduce((acc, tile) => {
    acc[tile] = true;
    return acc;
  }, {});
  setClickableStatus(initialStatus);
}, [tiles]);

2. 修改点击事件，先校验状态再执行逻辑 #

更新goldClicked函数，每次触发时先检查当前按钮的可点击状态，只有状态为true时才执行业务逻辑，同时将状态置为false：

const goldClicked = (event) => {
  // 获取当前按钮的唯一标识tile
  const tile = event.currentTarget.key;
  
  // 状态校验：不可点击则直接返回
  if (!clickableStatus[tile]) return;

  // 执行你的核心业务逻辑
  // ...（比如之前的操作）

  // 标记该按钮为不可点击
  setClickableStatus(prev => ({
    ...prev,
    [tile]: false
  }));
}

3. 可选：保留DOM层面的禁用作为视觉提示 #

虽然DOM限制能被篡改，但可以保留用来给用户提供直观的视觉反馈，核心拦截逻辑还是依赖状态校验：

<button 
  key={tile} 
  className={`${styles.tile} ${styles.button} ${!clickableStatus[tile] ? styles.disableClick : ''}`} 
  onClick={goldClicked}
  disabled={!clickableStatus[tile]}
>
  <div className={`${styles.cover}`}>
    <img 
      src={require("../../../assets/img/goldbar.png")} 
      id={`button-${tile}`} 
      className={`${styles.bomb} ${styles.displayOff}`} 
      alt={`button-${tile}`}
    />
  </div>
</button>

核心提示 #

• 所有前端可见的DOM/CSS限制都能被绕过，唯一可靠的拦截方式是在业务逻辑中加入状态校验，无论用户怎么修改DOM，点击事件触发时都会先检查状态，不可点击则直接终止执行。
• 如果涉及后端交互，一定要在后端做二次校验（比如验证该按钮是否已经被点击过），彻底避免前端篡改状态后提交无效请求。

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