Javascript 为什么tabindex在这里只对0起作用，而对其余部分不起作用？

下面是我的React组件中的render方法，它在下面的屏幕截图中生成UI。当我使用该应用程序时，在选择输入后，我必须按tab键两次以选择第一枚硬币。但是，下一个选项卡开始选择浏览器的不同部分

render() {
  const { coins } = this.state;

  return (
    <section id="search-modal">
      <header className="search-header">
        <input
          id="coin-search"
          type="text"
          placeholder="Search"
          onChange={() => this.handleChange()}
        />
        <button className="close-modal-x" onClick={this.props.closeSquareEdit} />
      </header>
      <ul className="coins-list">
        { coins !== 'undefined'
          ? coins.map((coin, i) => (
            <li
              key={coin.id}
              tabIndex={i}
              onClick={() => this.handleSelect(coin)}
            >
              {coin.name}
              <span className="symbol">({coin.symbol})</span>
            </li>))
          : null
        }
      </ul>
    </section>
  );
}

render（）{
const{coins}=this.state；
返回(
this.handleChange（）}
/>

{硬币！=='未定义'
？硬币。地图（（硬币，i）=>(
this.handleSelect（硬币）}
>
{coin.name}
（{coin.symbol}）
））
：null
}

);
}

---

^在这里，在选择了两个选项卡后，第三个选项卡似乎重新选择了输入，第四个选项卡单击选择了浏览器url。

找到了答案！我需要

role=“button”

---

也许你在页面的其他地方有重复的标签索引？

<ul className="coins-list">
  { coins !== 'undefined'
    ? coins.map((coin, i) => (
      <li
        key={coin.id}
        role="button"
        tabIndex={i}
        onFocus={() => this.setFocus(coin)}
        onClick={() => this.handleSelect(coin)}
      >
        {coin.name}
        <span className="symbol">({coin.symbol})</span>
      </li>))
    : <li>Loading...</li>
  }
</ul>

setFocus(coin) {
  console.log('setFocus', coin.id);
  this.setState({ focused: coin });
}

handleSelect(coin) {
  console.log('handleSelect', coin.id);
  this.setState({ focused: coin });
  this.props.openEdit(true, coin);
}