Ayúdenme, no tengo idea de cómo resolver ese problema cuando el usuario presiona ctrl + clic izquierdo en la fila de la tabla para resaltar la fila, y en shift + clic izquierdo debe resaltar todos los datos de fila donde el usuario hace clic desde 1 fila hasta 2 últimas fila (ejemplo como la selección de múltiples filas de la tabla de reacciones). No usar ninguna biblioteca de terceros.
Código:-
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>Por favor ayuda.
Supuse que su componente es funcional, pero espero que esto le dé una idea de cómo hacerlo de todos modos. También asumí que los comments son un accesorio de su componente:
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]); } } Ahora, en su declaración de devolución, puede usar el estado para mostrar la fila como resaltada o no al hacer coincidir el idx del comentario. Aquí acabo de darle a cada elemento resaltado un fondo amarillo, pero puede diseñarlo de la forma que desee.
<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> ...