React+Webpack移动端按钮onClick事件异常问题求助

一、按钮保持按下状态的修复 #

移动端按钮按下后无法恢复常态，核心原因是同步alert阻塞了触摸事件流，导致按钮的:active状态未被正常清除。可通过以下两种方式解决：

1. 异步化alert提示
   把同步alert放到setTimeout中，让触摸事件先完成再弹出提示，避免阻塞状态重置：

const loginClick = () => {
    // 异步弹出alert，不阻塞事件流
    setTimeout(() => alert("I am an alert box A!"), 0);
    const payload = {psw: password, usr: username, keepLogged: keepLogged};
    store.dispatch(tryLogin(payload));
    setTimeout(() => alert("I am an alert box B!"), 0);
}

2. 手动触发按钮失焦
   给按钮添加ref，在点击时主动调用blur()清除按下状态：

import { useRef } from 'react';

// ...
const loginBtnRef = useRef(null);

const handleLogin = () => {
    // 先让按钮失焦
    loginBtnRef.current?.blur();
    loginClick();
}

// 按钮组件
<button 
    ref={loginBtnRef}
    className='btn' 
    onClick={handleLogin} 
    style={{zIndex: 100}}
>
    LOGIN
</button>

二、Redux Dispatch失效的排查与修复 #

移动端alert正常弹出但dispatch未执行，大概率是变量获取异常或代码执行被隐藏错误中断，按以下步骤排查：

1. 先移除alert，排查控制台错误
   alert会阻塞代码执行并掩盖控制台报错，先注释掉两个alert，用Chrome调试工具连接iOS模拟器/真机，查看控制台是否有未捕获的异常（比如username/password未定义、action创建函数报错等）。

2. 确认表单变量的实时性
   检查username、password是否通过React的useState正确绑定到输入框，避免移动端键盘收起时表单值丢失：

// 正确绑定表单值的示例
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

// 输入框组件
<input 
    type="text"
    value={username}
    onChange={(e) => setUsername(e.target.value)}
/>

在dispatch前打印payload，确认值是否正确：

const loginClick = () => {
    const payload = {psw: password, usr: username, keepLogged: keepLogged};
    console.log('payload:', payload); // 移动端查看控制台输出
    store.dispatch(tryLogin(payload));
}

3. 检查Redux中间件与store配置
   如果tryLogin是异步action（比如用了redux-thunk），确认移动端打包后的代码中中间件已正确引入，Webpack的生产模式压缩未导致中间件失效。可在store初始化时打印中间件列表，确认thunk/saga等已加载。

4. 添加触摸事件优化
   移动端可能存在click延迟或触摸事件冲突，给按钮添加CSS属性优化触摸行为：

.btn {
    touch-action: manipulation; /* 禁用双击缩放，加速触摸响应 */
    -webkit-tap-highlight-color: transparent; /* 移除iOS点击高亮 */
}

内容的提问来源于stack exchange，提问作者Antonio Del Sannio