Question

我正在建立桌子。当用户单击并拖动这些单元格时，它们之间的单元格将突出显示。但是我不知道为什么当我单击一个单元格时，它还会在我单击的最后一个单元格和新单元格之间突出显示。我想当我单击它时仅在一个单元格上突出显示

这是我的代码：

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 请帮我。谢谢

Answer 1

我没有测试过这个，因为我无法使您的链接正常工作，但是我猜这是因为您正在经历“异步状态更改”。来自文档：State Updates May Be Asynchronous

在您的beginSelection中，您正在呼叫updateSelection，但是我猜该代码运行时选择状态尚未实际上更新。一个简单的解决方法是在您的updateSelection中添加第二个参数

let updateSelection = (i, force) => {
    if (selecting || force) {
        setEnd(i);
    }
}

，然后从updateSelection(i, true)和beginSelection呼叫endSelection，但从onMouseMove呼叫不。您也可以直接从setEnd和beginSelection调用endSelection，如果比较容易。两种选择都应该起作用，这或多或少是一个优先事项。

Answer 2

问题是您将start设置为onMouseDown并仅在onMouseMove上对其进行更新。因此，可以通过重置onMouseDown事件的开始和结束来解决您的问题：

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

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

单击拖动并在onClick中做出反应？

2 个答案: