时间戳

首页 > 解决方案 > 单击拖动和onClick反应？

javascript - 单击拖动和onClick反应？

问题描述

我正在建一张桌子。当用户单击并拖动单元格时，之间的单元格会突出显示。但我不知道为什么当我单击单个单元格时，它也会在我单击的最后一个单元格和新单元格之间突出显示。我想当我点击它时只在一个单元格上突出显示

这是我的代码：

import React, {useState} from "react";
import './Style.css';

export default function Table() {
    let div = [];
    const [start, setStart] = useState(null);
    const [end, setEnd] = useState(null);
    const [selecting, setSelecting] = useState(false);

    let beginSelection = i => {
        setSelecting(true);
        setStart(i);
        updateSelection(i);
    };

    let endSelection = (i = end) => {
        setSelecting(false);
        updateSelection(i);

    };
    let updateSelection = i => {
        if(selecting) {
            setEnd(i);
        }
    };
    for(let i = 0; i <= 31; i++ ) {
        let a = (

                <span
                    key={i}
                    className={
                        ((end != null  && start != null) && (end <= i && i<= start || (start <= i && i <= end)) ? "selected": "")
                    }
                    onMouseDown={()=>beginSelection(i)}
                    onMouseUp={()=>endSelection(i)}
                    onMouseMove={()=>updateSelection(i)}
                >
                {i}
            </span>
        );
        div.push(a);
    }
    return div;
}

这是我的完整代码和演示：https ://codesandbox.io/s/github/Kalipts/table_grid 请帮助我。谢谢

标签： javascriptreactjsreact-hooks

解决方案

问题是您设置启动 onMouseDown 并仅在 onMouseMove 上更新它。因此，您可以通过在 onMouseDown 事件中重置开始和结束来解决您的问题：

  let beginSelection = i => {
    setSelecting(true);
    setStart(i);
    setEnd(i);
    updateSelection(i);
  };

https://codesandbox.io/s/epic-newton-nlmvj

推荐阅读