我有一些SVG充当应用程序的按钮。这些SVG有一个正常版本和一个按下版本。在TouchStart上,按下的SVG应该显示,在TouchEnd上,SVG恢复正常。在React中处理这种情况的好方法是什么?
这是我的方法,但我发现onTouchStart按预期切换了按钮,但onTouchEnd似乎没有重新呈现。
function HomeButton(props: ButtonProps) {
const [pressed, setPressed] = useState(false);
function handleTouchStart() {
setPressed(true)
}
function handleTouchEnd() {
setPressed(false)
}
return <button onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>{pressed ? <SVGPressed /> : <SVGNormal />}</button>
}
1条答案
按热度按时间wfveoks01#
我找到了问题的解决方案。经过深入研究,我找到了对类似问题的响应,该响应声明了页面重新呈现和onTouchEnd事件之间可能存在的争用条件。
我设置了在按下和正常状态之间变化的SVG节点,并将其设置为一个随onTouchStart和onTouchEnd事件变化的变量,现在一切似乎都运行得很好。