[英]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.