javascript - 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,
top,
}}
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
解决方案
推荐阅读
- python - 分配结果变量的函数向我显示此错误
- c - 将变量更新/写入到 ObjectNode
- postgresql - 如何修复“无法解码八位字节序列#(130)”。在 pgloader
- c# - 未使用 ScriptResourceDefinition 路径
- laravel - Laravel 如何使用响应 json 返回视图数据(均 1 次)?
- python - ValueError:数组的长度必须相同 - 将数据帧打印到 CSV
- css - 我怎样才能让这个东西响应
- java - 如何忽略 SSL 证书 Java
- tensorflow - 以设定的比例混合数据集
- javascript - 如何在 RxJS 中创建一个 observable,它等待 2 个 observables(按顺序),然后行动,然后再按顺序等待这 2 个