React中SVG按钮触摸切换状态及onTouchEnd不重渲染的解决方法

你的问题核心是**onTouchEnd未触发导致状态没重置**，常见原因是触摸过程中手指滑出按钮区域、系统中断触摸（比如弹出通知），这时候浏览器会触发onTouchCancel而非onTouchEnd，导致pressed状态一直停留在true。

直接给你修复方案：

• 给按钮补上onTouchCancel事件处理，和onTouchEnd共用同一个状态重置函数
• 可选：如果需要兼容点击事件，确保触摸事件不会干扰点击（必要时在handleTouchStart里调用event.preventDefault()，但要注意这会阻止按钮默认的点击行为，需根据业务场景权衡）

修改后的代码：

function HomeButton(props: ButtonProps) {
  const [pressed, setPressed] = useState(false);
  
  // 统一处理状态重置
  const resetPressedState = () => {
    setPressed(false);
  };

  return (
    <button
      onTouchStart={() => setPressed(true)}
      onTouchEnd={resetPressedState}
      onTouchCancel={resetPressedState}
    >
      {pressed ? <SVGPressed /> : <SVGNormal />}
    </button>
  );
}

另外可以排查两个额外点：

1. 检查SVGPressed和SVGNormal组件是否是纯组件（比如函数组件用React.memo包裹），避免不必要的渲染问题
2. 确认按钮的CSS没有设置pointer-events: none这类会阻止触摸事件的样式

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