React JS - 元素专注于输入不起作用

Question

我在以编程方式聚焦元素时遇到问题。我有一个看起来像这样的ul：

      <ul className="text-left">
        {Object.keys(props.characters).map((char, i) => {
          return (
            <li key={props.characters[char].key}>
              <button type="button" className={"btn align-middle bg_" + props.characters[char].character}>
                <div className={"label text-left float-left " + getFontColorFromCharacter(props.characters[char].character)}>
                  <img alt="" className="char-img" src={"/images/characters/" + props.characters[char].character + "_xs.png"}/>
                  <input 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)}/>
                  <span className="align-middle" id={props.characters[char].key + "_span"} onClick={e => toggleDNone(props.characters[char].key)} > {props.characters[char].player_name}</span>
                </div>
                <div className={"actions " + getFontColorFromCharacter(props.characters[char].character)}>
                  <span className="action">
                    <FontAwesomeIcon icon="times-circle" title="Supprimer" onClick={() => props.removeCharacterHandler(props.characters[char].key)}/>
                  </span>
                </div>
              </button>
            </li>
          );
        })}
      </ul>

Javascript ：

//Toggle d-none class on input & span for player name edition
function toggleDNone(key) {
    document.getElementById(key + "_input").classList.toggle("d-none");
    document.getElementById(key + "_span").classList.toggle("d-none");
    if (!document.getElementById(key + "_input").classList.contains("d-none")) {
        document.getElementById(key + "_input").focus();
    }
}
//When the user hit tab key, navigate to next input
function tabToNext(event){
    if(event.key === "Tab")
    {
        var allInput = document.querySelectorAll("[id$='_input']");
        var indexOfCurrent = Array.from(allInput).indexOf(event.target);
        var id;
        if (indexOfCurrent + 1 === Array.from(allInput).length)
        {
            id = allInput[0].id;
        }
        else
        {
            id = allInput[indexOfCurrent + 1].id;
        }
        toggleDNone(allInput[indexOfCurrent].id.replace("_input", ""));
        toggleDNone(id.replace("_input",""));
    }
}

当用户单击跨度时，将显示输入并且焦点正在工作。当用户按 Tab 键进入下一个输入时，将显示输入，但焦点不起作用。

我尝试将选项卡索引设置为 -1，就像我在帖子中看到的那样，但它不起作用。

有什么想法吗？

Answer 1

找到了解决方案。问题是第二个切换DNone调用在第一个调用完成之前开始。

我刚刚在第二次调用中添加了一个 setTimeOut 100 毫秒，它起作用了。

谢谢大家