iOS中React按钮快速点击触发错误事件的问题求助

不确定该问题仅存在于React还是属于通用Web问题，但常规网站中无法复现。在iOS设备上快速连续点击两个按钮时，会触发首个被点击按钮的事件。比如按钮2负责更新状态，按钮1触发alert弹窗，若快速点击按钮2后立即点击按钮1，状态会被更新两次。本人使用iPhone 13（iOS 15.2），其他设备及系统也可复现该问题。

代码示例 #

React场景 #

<div className="buttons">
      <button onClick={() => alert("1")}>1</button>
      <button onClick={() => setCount(count + "2")}>2</button>
      {count}
</div>

原生Web场景 #

<button onclick="alert('1')">
    1
</button>
<button onclick="console.log('2')">
    2
</button>

补充测试情况 #

测试Material-UI的多选组件时也出现此问题。

解决方案 #

1. 防抖处理

给按钮点击事件添加防抖逻辑，过滤短时间内的重复触发：

// 通用防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// React组件中使用
const handleButton2Click = useCallback(debounce(() => {
  setCount(prev => prev + "2"); // 使用函数式更新避免闭包问题
}, 200), []);

将按钮2的onClick绑定这个防抖后的函数，延迟时间可根据需求调整（一般150-200ms足够）。

2. 状态锁限制并发

通过状态锁确保同一时间只有一个操作执行：

const [isProcessing, setIsProcessing] = useState(false);

const handleButton2Click = () => {
  if (isProcessing) return;
  setIsProcessing(true);
  setCount(prev => prev + "2");
  // 操作完成后解锁，可根据实际异步逻辑调整时机
  setTimeout(() => setIsProcessing(false), 100);
};

配合按钮禁用状态更直观：

<button onClick={handleButton2Click} disabled={isProcessing}>2</button>

3. 优化事件处理逻辑

iOS的触摸事件队列可能存在堆积，可尝试在事件处理中阻止默认行为（需测试兼容性）：

const handleButtonClick = (e) => {
  e.preventDefault();
  // 执行你的业务逻辑
};

或者优先使用touchstart事件替代click，但要注意避免和其他交互冲突。

4. 使用函数式状态更新

在React中，尽量使用函数式更新状态，避免闭包导致的旧状态引用问题，这能减少一部分重复更新的场景：

// 错误写法：依赖外部count变量，可能导致重复更新
// setCount(count + "2")

// 正确写法：使用函数式更新，获取最新状态
setCount(prevCount => prevCount + "2")

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