反應：如何通過箭頭鍵在列表中導航

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，因此您不必延遲或混淆標準輸入編輯行爲。

在渲染循環中，您只需根據光標檢查索引來查看哪一個是活動的。

如果您要根據字段的輸入過濾結果集，則只要您過濾該設置，就可以將光標重置爲零，以便始終保持行爲一致。