React：如何通过箭头键浏览列表

我已经构建了一个简单的组件，其中包含单个文本输入，下面是一个列表（使用语义 ui）。

现在我想使用箭头键浏览列表。

• 首先我必须选择第一个元素。但是如何访问特定的列表元素呢？
• 其次，我将获取当前所选元素的信息并选择下一个元素。如何获取选择了哪个元素的信息？

选择意味着添加类active或者有更好的主意吗？

export default class Example extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = { result: [] }
    }
    handleChange(event) {
        // arrow up/down button should select next/previous list element
    }
    render() {
        return (
            <Container>
                <Input onChange={ this.handleChange }/>
                <List>
                    {
                        result.map(i => {
                            return (
                                <List.Item key={ i._id } >
                                    <span>{ i.title }</span>
                                </List.Item>
                            )
                        })
                    }
                </List>
            </Container>
        )
    }
}

尝试这样的事情：

export default class Example extends Component {
  constructor(props) {
    super(props)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.state = {
      cursor: 0,
      result: []
    }
  }

  handleKeyDown(e) {
    const { cursor, result } = this.state
    // arrow up/down button should select next/previous list element
    if (e.keyCode === 38 && cursor > 0) {
      this.setState( prevState => ({
        cursor: prevState.cursor - 1
      }))
    } else if (e.keyCode === 40 && cursor < result.length - 1) {
      this.setState( prevState => ({
        cursor: prevState.cursor + 1
      }))
    }
  }

  render() {
    const { cursor } = this.state

    return (
      <Container>
        <Input onKeyDown={ this.handleKeyDown }/>
        <List>
          {
            result.map((item, i) => (
              <List.Item
                key={ item._id }
                className={cursor === i ? 'active' : null}
              >
                <span>{ item.title }</span>
              </List.Item>
            ))
          }
        </List>
      </Container>
    )
  }
}

光标会跟踪您在列表中的位置，因此当用户按下向上或向下箭头键时，您会相应地减少/增加光标。光标应与数组索引一致。

你可能想要onKeyDown观看箭头键而不是onChange，这样您的标准输入编辑行为就不会出现延迟或混乱。

在渲染循环中，您只需对照光标检查索引即可查看哪个索引处于活动状态。

如果您根据字段的输入来过滤结果集，则只要在过滤结果集时将光标重置为零即可，这样您就可以始终保持行为一致。