为什么这里的 tabindex 只能用 0 而不能用其余的？

Question

这是我的 React 组件中的渲染方法，它在下面的屏幕截图中生成 UI。当我使用该应用程序时，在输入 select 之后，我必须按两次 Tab 键才能 select 第一枚硬币。然而，下一个选项卡开始 select 浏览器的不同部分？

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 被 select 编辑后，第 3 个选项卡似乎重新select 输入，第 4 个选项卡单击 select 浏览器 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);
}

为什么这里的 tabindex 只能用 0 而不能用其余的？

Why does tabindex here only work with 0 and not the rest?

html

javascript

markup

tabindex

reactjs