React表格行点击时如何捕获Ctrl或Shift按键的按下状态

解决方案 #

点击事件的回调参数（React合成的MouseEvent对象）本身就携带了修饰键的按下状态，你可以直接读取对应的属性获取状态：

• e.ctrlKey：布尔值，代表Ctrl键是否按下，Mac系统下Command键按下时该属性也会返回true
• e.shiftKey：布尔值，代表Shift键是否按下
• e.metaKey：布尔值，若需要单独区分Mac系统的Command键可以使用该属性

代码修改示例 #

你只需要调整onClick回调的传参逻辑，把对应状态传入你的selectStudent方法即可：

<div>
   <table>
     <tbody>
          {students.map((x, i)=> ( 
            <tr 
              onClick={(e)=> selectStudent(i, e.ctrlKey, e.shiftKey)} 
              key={i} // 补充key属性避免React警告
            >
              <td>{x}</td>
            </tr>
          ))}
     </tbody>
   </table>
</div>

业务逻辑处理示例 #

你可以在selectStudent方法中直接根据传入的按键状态实现不同的选择逻辑：

const selectStudent = (studentIndex, isCtrlPressed, isShiftPressed) => {
  if (isShiftPressed) {
    // 实现Shift区间选择逻辑：选中上次选中行到当前行的所有行
  } else if (isCtrlPressed) {
    // 实现Ctrl加选/反选逻辑：仅切换当前行的选中状态，不清空已有选中项
  } else {
    // 实现普通单选逻辑：清空所有已选中项，仅选中当前行
  }
}

内容的提问来源于stack exchange，提问作者V R