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

Question

我已经建立了一个具有单个文本输入的简单组件，并且在该列表的下方（使用语义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>
        )
    }
}

Answer 1

尝试这样的事情：

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，所以您不会延迟或混乱标准输入编辑行为。

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

如果要基于来自字段的输​​入来过滤结果集，则可以在过滤集合时随时将光标重置为零，以便始终保持行为一致。