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

在你的生命周期方法中添加和删除enent listeners

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>

浏览组件列表

1 个答案: