反应：如何通过箭头键在列表中导航

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.key === 38 && cursor > 0) { 
     this.setState(prevState => ({ 
     cursor: prevState.cursor - 1 
     })) 
    } else if (e.key === 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' : ''}`} 
       > 
       <span>{ item.title }</span> 
       </List.Item> 
      )) 
      } 
     </List> 
     </Container> 
    ) 
    } 
} 

光标跟踪在列表中的位置，所以当用户按下向上或向下箭头，你递减/递增相应的光标键。游标应该与数组索引一致。

您可能希望onKeyDown用于观看箭头键而不是onChange，因此您不必延迟或混淆标准输入编辑行为。

在渲染循环中，您只需根据光标检查索引来查看哪一个是活动的。

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