react.js中的长按和拖动事件

Question

我想使用反应实现以下交互。 但我不知道要使用什么事件。

这是长按和拖动。 但我找不到任何参考资料、示例或库来继续。 我只设法做一个悬停效果

https://fiddle.jshell.net/8wsr7xa1/

<div>
    {items.map((obj,i) =>  
        <div 
        key={i} 
        style={this.state.active === obj ? 
        {backgroundColor: 'yellow'} : {}} 
        onMouseEnter={this.onMouseEnter.bind(this, obj)}>
        {obj}
        </div>
     )}
</div>

Answer 1

从您拥有的日历来看，我假设您在灰色的日子应用了某种类型的条件（不应选择它们）。 归功于 RoshanJossey，他为长按创建了一个反应事件列表器，具有可编辑的阈值https://codesandbox.io/s/uselongpress-oekx2?file=/src/useLongPress.js你应该为你的日历 div 提供这个事件（longClick）并且状态默认为 false

const [isLongClickTriggered, setIsLongClickTriggered] = useState(false)

每当注册长点击事件时，您都应该将此状态更改为 true。 之后，只要未注册另一个点击，您就可以在您的演示启动时在悬停时选择日历 div。 被选中的日历 div 也可以单独存储。

const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions);
.
.
.
<div>
    {items.map((obj,i) =>  
        <div 
        key={i} 
        style={this.state.active === obj ? 
        {backgroundColor: 'yellow'} : {}} 
         {...longPressEvent}>
        {obj}
        </div>
     )}
</div>