[英]How to select multiple row in Table row ?Using(ctrl+click) and (Shift+click) in react js
請幫助我,我不知道如何解決這個問題,當用戶按下 ctrl + 左鍵單擊表格行時應該突出顯示該行,而在 shift + 左鍵單擊它應該突出顯示用戶從 1 行到最后 2 行單擊的所有行數據行(例如 react-Table 多行選擇)。 不使用任何 3 方庫。
代碼:-
const ClickHighlight = (event, ID, ChannelName) => {
if (event.ctrlKey) {
}
if(event.shiftKey) {
console.log("helloShift");
}
}
return (
<div className="mainContent">
<div className="tableHeaderBody">
<div className="TableText">PlayList</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
</div>
<div className="tableBody" >
<table className="table" id="tableStudent" data-multiple-select-row="true"
data-click-to-select="true">
<Header
headers={headers}
/>
<tbody>
{comments.map((comment) => {
return (
<tr key={comment.idx} tabIndex={comment.idx} className="border_bottom" onMouseDown={(e) => ClickHighlight(e, comment.ClipName, comment.ChannelName)}>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
請幫忙。
我假設您的組件是一個功能組件,但希望這能讓您了解如何執行此操作。 我還假設comments
是你的組件的一個支柱:
const [highlightedRows, setHighlightedRows] = useState([]);
const ClickHighlight = (event, id, ChannelName) => {
if (event.ctrlKey || event.shiftKey) {
// add to highlighted
setHighlightedRows((current) => {
if (current.includes(id)) {
// row is already highlighted. Unhighlight but keep the others
return current.filter((entry) => entry !== id);
} else {
// add row to the current list of highlighted ones
return [...current, id];
}
});
} else {
// highlight clicked row and de-highlight others
setHighLightedRows([id]);
}
}
現在,在您的 return 語句中,您可以使用 state 通過與評論的idx
匹配來將行呈現為突出顯示或不突出顯示。 在這里我只是給每個突出顯示的項目一個黃色背景,但你可以按照你想要的方式設計它。
<tbody>
{comments.map((comment) => {
const isHighlighted = highlightedRows.includes(comment.idx);
// we can now conditionally render based on if this flag is true or not
return (
<tr
key={comment.idx}
tabIndex={comment.idx}
className="border_bottom"
onMouseDown={(e) => ClickHighlight(e, comment.idx, comment.ChannelName)}
style={ isHighlighted ? { backgroundColor: 'yellow' } : {}}
>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.