簡體   English   中英

如何在表行中顯示 select 多行?在 React js 中使用(ctrl+click)和(Shift+click)

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM