Как выделить диапазон ячеек с помощью мыши в реакции?

Question

Я строю стол с reactjs. Поэтому я хочу, чтобы, когда пользователь щелкает ячейку и удерживает ее, перемещается в другую ячейку. Ячейки между ними должны выделяться. Я делаю это с помощью селектора DOM. И я думаю, что это не правильный способ реагировать. Итак, как я могу это сделать без DOM SELECTOR

Вот мой код с dom select:

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

export default function Table() {
    const [cell, setCell] = useState([]);
    let div = [];

    let selecting, start, end;

    let beginSelection = i => {
        selecting = true;
        start = i;
        updateSelection(i);
    };

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

    let updateSelection = i => {
        if (selecting)
            end = i;
        [...document.querySelectorAll('span')].forEach((span, i) =>
            span.classList.toggle('selected', i >= start && i <= end || i >= end && i <= start));
    };



    for(let i = 0; i < 31; i++) {
        let a = <span key={i} onMouseDown={()=>beginSelection(i)} onMouseUp={()=>endSelection(i)} onMouseMove={()=>updateSelection(i)}>{i}</span>;

        div.push(a);
        cell.push(a);
    }


    return div;
}

Вот мое демо: https://codesandbox.io/s/github/Kalipts/hover, пожалуйста, помогите. Спасибо

Answer 1

с использованием state & className для элемента ячейки

className={ (end <= i && i <= start) || (start <= i && i <= end) ? "selected" : "" }

https://codesandbox.io/s/ecstatic-driscoll-r8649