Navigieren durch eine Liste von Komponenten

Question

Ich benutze reactjs zu versuchen und navigieren Sie durch eine Liste von Komponenten mit der Tastatur Art von wie Sie mit den Tasten j und k durch Facebook navigieren können. Wie kann ich mit der Taste j den Fokus auf die erste Komponente in der Liste verschieben, wenn ich zum ersten Mal auf der Seite lande, und dann den Fokus zwischen den Komponenten verschieben, nachdem ich j und k verwendet habe?

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

so, was der Code tut, ist erzeugt grundsätzlich Komponenten in die geordnete Liste und im frage mich, wie ich den Fokus zwischen ihnen mit den j und k Tasten verschieben kann und nicht Reiter.

Answer 1

Momentan arbeite ich an einem ähnlichen Problem.

Angenommen, Sie solchen Zustand haben:

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

In Sie lifecicle Methoden hinzufügen und enent Zuhörer

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

hier entfernen ist HandleKeyDown - gerade eingestellten onFocus Wert im Handler:

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}); 
} 

Und je nachdem, welches Element onFocus auf wahr gesetzt hat - Sie kann (zum Beispiel) geeignete Klassen setzen:

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