javascript - 浏览组件列表

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 键而不是使用 tab 键在它们之间转移焦点。

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>