react-use-gestue 的 onDoubleClick 不起作用

问题描述

这是我的组件，看起来不错，但没有触发：

/** @jsx jsx */
import { useState,useRef } from 'react';
import { jsx } from 'theme-ui';
import PropTypes from 'prop-types';
import { useGesture } from 'react-use-gesture';
import { useContext } from '../MyContext';

const ImageCropper = ({ children }) => {
  const { state,dispatch } = useContext();

  const imageWrapperRef = useRef();
  const [position,setPosition] = useState({
    left: 0,top: 0,});
  const [scale,setScale] = useState(1);

  useGesture(
    {
      ondoubleclick: () => {
        //this is not firing 
        setScale(scale === 1 ? 1.8 : 1);
        toggledisableSwiping(scale === 1);
      },onDragEnd: () => {
        console.log('drag end');
      },onDrag: ({ offset: [left,top] }) => {
        setPosition({
          left,top,});
      },},{
      domTarget: imageWrapperRef,);

  const toggledisableSwiping = disabled => {
    dispatch({
      type: 'media_gallery_toggle_disabel_swiping',disabled,});
  };

  const { left,top } = position;
  return (
    <div
      sx={{
        position: 'relative',height: '100vh',width: 375,overflow: 'hidden',}}
    >
      <div
        ref={imageWrapperRef}
        className="imageWrapper"
        style={{
          left,}}
        sx={{
          position: 'absolute',display: 'flex',alignItems: 'center',transform: `scale(${scale})`,justifyContent: 'center',height: '100%',width: '100%',}}
      >
        {children}
      </div>
    </div>
  );
};

ImageCropper.propTypes = {
  children: PropTypes.node,};

export default ImageCropper;

包的版本是：9.1.3

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）