如何在表格行中选择多行？在反应js中使用（ctrl+click）和（Shift+click）

Question

请帮助我，当用户按下 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>

请帮忙。

Answer 1

我假设您的组件是一个功能性组件，但希望这能让您了解如何去做。我还假设 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]);
  }
}

现在，在您的返回语句中，您可以通过匹配注释的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>
         ...