Question

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

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后，第3个标签似乎重新选择输入，第4个标签点击选择浏览器网址。

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所需的奇怪数量的标签仍然存在。我需要点击标签两次......然后再开几次，然后开始正确地进入列表。

我添加了一个新功能，我修改了一个功能：

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而不是其余的？

1 个答案: