コンポーネントのリストをナビゲートする

Question

reactjsを使用して、jキーとkキーを使用してfacebookをナビゲートする方法のようなキーボードの種類を使用してコンポーネントのリストを試してみます。最初にページに着いたときにjキーを使用してリスト内の最初のコンポーネントにフォーカスを移動し、jとkを使用した後でコンポーネント間でフォーカスを移動するにはどうすればよいですか？

<ul className={s.feed}> 
    {this.props.data.map((item, index) => { 
    <li key={index} className={s.componentContainer}> 
     <Component component={item} /> 
    </li> 
    })} 
</ul> 

ので、どのようなコードがないことは、基本的にはちょうど私がjおよびkキーを使ってそれらの間のフォーカスを移動し、タブを使用することはできませんどのように思って順序付きリストとIMにコンポーネントを生成します。

Answer 1

現在、私は同様の問題に取り組んでいます。

は、あなたがそのような状態があるとします。あなたには

items = [ 
    { 
     name: 'a', 
     onFocus: true 
    }, 
    { 
     name: 'b', 
     onFocus: false 
    } 
]; 

は、メソッドをlifecicle追加し、ここにenentリスナーに

componentWillMount() { 
    document.addEventListener("keydown", this.handleKeyDown, false); 
} 
componentWillUnmount() { 
    document.removeEventListener("keydown", this.handleKeyDown); 
} 

を削除handleKeyDownです - あなたのハンドラ内だけの設定のonFocus値：

handleKeyDown(e) { 
    let index = -1; 
    const items = this.state.items; 
    items.map((item, i) =>{ 
     if(item.onFocus)index = i; 
    }); 

    switch(e.keyCode) { 
     case 74: 
      e.preventDefault(); 
      if(index > 0) i--; 
      break; 
     case 75: 
      e.preventDefault(); 
      if(index < this.state.items.length - 1) i++; 
      break; 
    } 
    for(let i = 0; i < items.length; i++) { 
     items[i].onFocus = i === index; 
    } 
    this.setState({items}); 
} 

onFocusがtrueに設定されている要素に応じて

<ul> 
    {this.props.data.map((item, i) => { 
    <li key={i}> 
     <Component component={item} className={item.onFocus ? 'active' : ''} /> 
    </li> 
    })} 
</ul>