反应按钮未触发onTouchEnd答案

【问题标题】：React button not firing onTouchEnd反应按钮未触发onTouchEnd
【发布时间】：2021-10-04 11:43:40
【问题描述】：

我正在使用带有子组件的 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 }

【问题讨论】：

标签： ios reactjs

【解决方案1】：

看起来当子组件发生变化时，按钮（即父组件）被重新渲染。所以 onTouchEnd 不会被触发。可能是重新渲染和 onTouchEnd 调用之间的竞争条件。

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

【讨论】：