React button not firing onTouchEnd

Question

我使用的是带有子组件的React按钮，这些子组件根据状态进行更改，例如按钮按下，触摸等。我已经定义了自定义事件处理程序来改变状态，isPressed, isTouched等。

问题:在iPhone上，onTouchEnd没有触发。当iOS画外音打开时，这个问题更加突出，因为鼠标事件没有被触发。所以用户必须点击两次才能真正点击成功。

以下是事件——>

const onMouseDown = function(){
setPressed(true);
};
const onMouseUp = function(){
handleClick();
}
const onTouchStart = function(){
setTouched(true);
setHover(false);
setPressed(true);
};
const onKeyDown = function(keyboardEvent: any){
if (keyboardEvent.key === "Enter") {
handleClick();
};
};
const onTouchMove = function(e: any){
e.preventDefault();
};
const onTouchEnd = function(e: any) {
e.preventDefault();
setTouched(false);
setHover(false);
if (!clicked) {
handleClick();
}
};
const onFocus = function () {
if (!touched) {
setHover(true);
}
};
const onKeyUp = function(keyboardEvent: any) {
if (keyboardEvent.key === "Enter") {
handleClick();
}
};
const onBlur = function() {
setHover(false);
setPressed(false);
};
const onMouseOver = function () {
if (!touched) {
setHover(true);
}
};
const onMouseOut = function () {
setHover(false);
setPressed(false);
}

这是按钮内容-

<button
style={buttonStyle}
onMouseDown={onMouseDownf}
onMouseUp={onMouseUp}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
onMouseOver={onMouseOver}
onFocus={onFocus}
onMouseOut={onMouseOut}
onBlur={onBlur}
onTouchStart={onTouchStart}
onTouchCancel={onTouchCancel}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onClick={() => { console.log("onClick") }}
disabled={props.disabled}
>
{
pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent
}
</button>
</>

如果我删除动态内容，它会正常工作，即——>

{ pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent }

{ normalButtonContent }

Answer 1

看起来像当子组件改变时，按钮(即父组件)被重新呈现。所以onTouchEnd没有被触发。可能是rerender和onTouchEnd调用之间的竞争条件。

将动态组件(即spinner/normalButtonContent)移出按钮有助于解决此问题。