在React中如何编程实现多个input输入框的selectAll全选功能

• 首先绑定键盘事件监听器到你的金额输入框组的父容器上，监听keydown事件
• 事件触发时判断是否为全选快捷键：Windows/Linux下为Ctrl + A，MacOS下为Meta + A
• 匹配到全选快捷键后，先调用event.preventDefault()阻止浏览器默认的单输入框全选行为
• 遍历你组合内所有的金额输入框DOM元素，依次调用每个元素的select()方法，即可同时选中所有输入框内的内容
• 如果需要兼容右键菜单的「全选」选项，可以给输入框组绑定contextmenu相关的自定义全选逻辑，覆盖默认右键菜单行为

// 核心逻辑代码示例
const inputGroup = document.querySelector('.money-input-group')
const moneyInputs = inputGroup.querySelectorAll('input')

inputGroup.addEventListener('keydown', (e) => {
  // 校验是否触发全选快捷键
  const isSelectAll = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a'
  if (!isSelectAll) return

  e.preventDefault()
  // 批量选中所有输入框内容
  moneyInputs.forEach(input => input.select())
})

注意：可以额外加逻辑判断当前焦点是否落在金额输入框组范围内，避免用户在页面其他位置操作时误触发该全选逻辑

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