css 该功能需要在移动的上点击2次-第一次点击是触发悬停状态,第二次是触发onClick功能

20jt8wwn 于 5个月前发布在其他

关注(0)|答案(1)|浏览(74)

我在我的React应用程序中有一个按钮。这个按钮在Web应用程序上按预期工作，但是当我在Chrome中打开我的iPhone上的应用程序时，按钮需要2次点击才能工作。第一次点击是为了触发悬停效果，第二个是触发onClick效果。我有两个svg文件-一个用于悬停状态和非悬停状态。svg图像将根据isHover值进行渲染。任何帮助都很感激！以下是我的代码：

const OptionsButton: FC<Props> = ({ 

    disabled=false, 
    className="options-button", 
    onClick, 
    style={cursor:'pointer',height:'34',width:'34',bottom:'15', right:'15',position:'absolute' } 

}) => {

    const [isHover, setIsHover] = useState(false);

    const handleMouseEnter = () => {
        setIsHover(true);
    }
    const handleMouseLeave = () => {
        setIsHover(false);
    }
    const handleClick = (e : React.MouseEvent<HTMLButtonElement>) => {
        onClick(e);
        e.stopPropagation();
    }
    

    return (
        <>
        { 
            ( isHover )? 
            <OptionsBtnPr 
                className = {className}
                onMouseLeave={handleMouseLeave}
                onClick={handleClick}
                style={style}
            /> :
            <OptionsBtn
                className = {className}
                onMouseEnter={handleMouseEnter} 
                onClick={handleClick}
                style={style}
            />
        }
        </>
    )
}

字符串

css

来源：https://stackoverflow.com/questions/77708556/buttons-require-2-taps-on-mobile-first-tap-is-to-trigger-hover-state-second-i

1条答案

按热度按时间

jdgnovmf1#

在移动的设备上不需要悬停状态。对于移动的设备，我们总是可以返回OptionsBtn x
使用react-device-detect库或任何其他方法将此isMobile检查到位

import { isMobile } from 'react-device-detect';

    const OptionsButton: FC<Props> = ({
      disabled = false,
      className = "options-button",
      onClick,
      style = {
        cursor: 'pointer',
        height: '34',
        width: '34',
        bottom: '15',
        right: '15',
        position: 'absolute',
      },
    }) => {
      const [isHover, setIsHover] = useState(false);
    
      const handleMouseEnter = () => {
        setIsHover(true);
      };
    
      const handleMouseLeave = () => {
        setIsHover(false);
      };
    
        
          const handleClick = (e: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => {
            onClick(e);
            e.stopPropagation();
          };
        
          return (
            <>
              {isHover && !isMobile ? (
                <OptionsBtnPr
                  className={className}
                  onMouseLeave={handleMouseLeave}
                  onClick={handleClick}
                  style={style}
                />
              ) : (
                <OptionsBtn
                  className={className}
                  onMouseEnter={handleMouseEnter}
                  onClick={handleClick}
                  style={style}
                />
              )}
            </>
          );
        };

字符串
如果仍然出现任何问题，请尝试将onMouseEnter prop传递给OptionsBtn（仅适用于!isMobile）

赞(0）回复(0）举报 5个月前

我来回答

css 该功能需要在移动的上点击2次-第一次点击是触发悬停状态,第二次是触发onClick功能

1条答案

相关问题

热门标签

最新问答