导航组件列表

我正在使用reactjs来尝试和使用键盘类浏览组件列表，例如如何使用j和k键在Facebook上导航。当我第一次登陆页面然后在使用j和k之后移动组件之间的焦点时，如何使用j键将焦点移动到列表中的第一个组件？导航组件列表

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

等什么代码的功能基本上是产生组件到有序列表和IM只是想知道我怎么可以用J和K键在它们之间切换焦点，并没有使用标签。

来源

2017-07-07 Philip J

向我们显示您的代码。你在寻找[focus]（https://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element）方法吗？ –

我用代码更新了它。我正在研究焦点方法，但我想知道是否有方法或其他方法将焦点移动到列表中的下一个项目？ –

目前我正在处理类似的问题。

假设你有这样的状态：

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>

来源

2017-07-07 16:59:10 kurumkan

最后五行中的for循环和setState方法应该做什么？ –

那里你更新 - 哪个项目具有'onFocuse'设置为'true' – kurumkan

我现在正在尝试它，并且onFocus实际上并没有关注组件，它只是一个真或假的值。我在哪里可以实际关注组件？ –

导航组件列表

回答

相关问题