React程序化聚焦Input失效：Tab切换时无法聚焦元素

我来帮你分析下这个问题，核心原因是浏览器默认的Tab行为干扰加上DOM更新时机不匹配导致的，咱们一步步来修复：

问题根源拆解 #

1. 当你按下Tab键时，浏览器会自动执行默认的焦点切换逻辑，这会和你自定义的tabToNext逻辑冲突，导致手动设置的焦点被覆盖。
2. 调用toggleDNone修改元素的d-none类后，DOM的显示状态更新是异步的，直接立刻调用focus()时，元素可能还处于隐藏状态，聚焦自然失效。

具体修复方案 #

1. 修改tabToNext函数，阻止默认行为+确保DOM更新后聚焦 #

function tabToNext(event){
  if(event.key === "Tab") {
    // 先阻止浏览器默认的Tab焦点切换行为
    event.preventDefault();
    
    const allInput = document.querySelectorAll("[id$='_input']");
    const inputArray = Array.from(allInput);
    const indexOfCurrent = inputArray.indexOf(event.target);
    
    // 计算下一个输入框的索引（循环到第一个如果是最后一个）
    const nextIndex = (indexOfCurrent + 1) % inputArray.length;
    const currentKey = event.target.id.replace("_input", "");
    const nextInput = inputArray[nextIndex];
    const nextKey = nextInput.id.replace("_input", "");
    
    // 隐藏当前输入框
    toggleDNone(currentKey);
    // 用setTimeout把聚焦操作放到下一个事件循环，确保DOM更新完成
    setTimeout(() => {
      toggleDNone(nextKey);
      nextInput.focus();
    }, 0);
  }
}

2. 优化toggleDNone函数，减少重复DOM查询 #

function toggleDNone(key) {
  const input = document.getElementById(key + "_input");
  const span = document.getElementById(key + "_span");
  
  input.classList.toggle("d-none");
  span.classList.toggle("d-none");
  
  // 仅在手动点击span时执行聚焦（Tab切换时我们已经手动处理了）
  if (!input.classList.contains("d-none") && document.activeElement !== input) {
    input.focus();
  }
}

进阶优化：React化处理（避免直接操作DOM） #

在React项目中，更推荐用useRef来管理元素引用，替代原生DOM查询，这样更符合React的数据流逻辑：

// 组件内部定义ref数组
const inputRefs = useRef({});

// 渲染input时绑定ref
<input 
  ref={el => inputRefs.current[props.characters[char].key] = el}
  className="align-middle d-none" 
  id={props.characters[char].key + "_input"} 
  type="text" 
  placeholder="Nom joueur" 
  value={props.characters[char].player_name} 
  onChange={e => props.changePlayerNameHandler(props.characters[char],e)} 
  onBlur={e => toggleDNone(props.characters[char].key)} 
  onKeyDown={e => tabToNext(e, inputRefs.current)}
/>

// 对应的tabToNext函数
function tabToNext(event, refs){
  if(event.key === "Tab") {
    event.preventDefault();
    
    const inputArray = Object.values(refs);
    const indexOfCurrent = inputArray.indexOf(event.target);
    const nextIndex = (indexOfCurrent + 1) % inputArray.length;
    
    const currentKey = event.target.id.replace("_input", "");
    const nextInput = inputArray[nextIndex];
    const nextKey = nextInput.id.replace("_input", "");
    
    toggleDNone(currentKey);
    setTimeout(() => {
      toggleDNone(nextKey);
      nextInput.focus();
    }, 0);
  }
}

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