javascript - 为什么这里的tabindex只适用于0而不适用于其余的？

Question

这是我的 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>
  );
}

^ 在选择了 2 个选项卡 Bitcoin 后，第三个选项卡似乎重新选择了输入，第四个选项卡单击选择了浏览器 URL。

Answer 1

想通了!我需要 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>

但是，到达第一个 li 所需的奇怪数量的选项卡仍然存在。我需要按两次 Tab 键...然后再按几次才能开始正确地在列表中向下移动。

我添加的一个新函数和我修改的一个函数:

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);
}