kalipts:
私はreactjsでテーブルを構築しています。私は、ユーザーが別のセルへのセルとホールド移動をクリックしたときにしたいので。細胞は、間のハイライトを持っています。私はDOMセレクタでそれを行います。そして、私はそれに反応しないように正しい方法だと思います。だから私は、DOM SELECTORせずにそれを行うことができますか
DOMを選択してここに私のコード:
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くださいヘルプが。感謝
Rkv88 - Kanyan:
電池素子用の状態&クラス名を使用して
className={ (end <= i && i <= start) || (start <= i && i <= end) ? "selected" : "" }