Нажмите перетаскивание и нажмите кнопку реагировать?

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

Проблема в том, что вы установили start onMouseDown и обновили его только наMouseMove. Таким образом, ваша проблема может быть решена путем сброса начала и конца события onMouseDown:

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

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

Answer 2

Я не проверял это, потому что не смог заставить вашу ссылку работать, но я предполагаю, что это потому, что вы испытываете "асинхронные изменения состояния". Из документов: Обновления состояний могут быть асинхронными

В вашем beginSelection вы звоните updateSelection, но я предполагаю, что состояние выбора еще не на самом деле обновляется при запуске этого кода. Простым решением является добавление второго параметра в ваш updateSelection

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

, а затем вызов updateSelection(i, true) из beginSelection и endSelection, но , а не из onMouseMove. Вы также можете позвонить setEnd напрямую с beginSelection и endSelection, если это проще. Обе альтернативы должны работать, это более или менее вопрос предпочтения.