用键盘使用react控制自定义列表组件

Question

我有一个组件，它显示一个包含项目的列表(本例中的名称)，每个名称都被包装在Item组件下，该组件位于List组件下。

我试图实现的是能够使用键盘箭头在列表中的项目中“导航”，然后按下就像鼠标单击-在Input组件中(在当前的项目上使用箭头键)，

问题是我不知道如何解决这个问题，我试了几种方法，但每一种方法都陷入了死胡同。

我在代码页中添加了一个示例列表，该列表模拟了我的原始代码--其中还包括了我正在使用的所有模块。

https://codepen.io/anon/pen/rKGdMJ?editors=0011

谢谢!

Answer 1

我认为其中一种方法可以是添加一个带有属性itemPosition的状态。并将<List>组件保存到ref中。然后使用箭头增加或减少itemPosition，并使用类似于childNodes[itemPosition]的内容通过ref选择一个项目。然后以类似的方式处理enter，然后调用项目上的.click()。

Answer 2

我要抛出一个宏观的建议，而不是一个特定的解决方案，看看它是否有用。

以一种有用和一致的方式处理按键是一个更大的问题，也是使用贡献代码的好时机。它几乎总是会带来比滚动你自己的系统更好的结果。

对我来说，反应-按键库的使用非常成功。我要说的是，如果您需要配置webpack来使用javascript装饰器(如果您感兴趣并想要帮助，请告诉我)，这会带来一些额外的设置。

下面是一个代码示例，它使用库来控制页面上的选项卡：

class EditContainer extends React.Component {
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
    }

  @keydown(
    'ctrl+1', 'meta+1',
    'ctrl+2', 'meta+2',
    'ctrl+3', 'meta+3',
    'ctrl+4', 'meta+4',
    'ctrl+5', 'meta+5',
    'ctrl+6', 'meta+6',
    'ctrl+7', 'meta+7',
    'ctrl+8', 'meta+8',
    'ctrl+9', 'meta+9',
    'ctrl+s', 'meta+s',
    )
  submit(event) {
    event.preventDefault();
    const {panels, changeActivePanel, saveRecord} = this.props;

    if (event.key === "s") {
      saveRecord();
      return;
    }

    const number_key = parseInt(event.key);
    if (!isNaN(number_key) && (number_key <= panels.length)) {
      changeActivePanel(panels[number_key - 1]);
    }
  }

  render() {
    return (
      <div className="edit-container">
        <Col sm={10} md={10} lg={10}>
        <EditLeftColumn/>
        </Col>
          <Col sm={2} md={2} lg={2}>
        <EditRightColumn />
          </Col>
      </div>
    );
  }
}

这里供参考的是我的babel.js，它允许这样做：

  "plugins": [
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "syntax-async-functions"
  ],
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": [
        "transform-decorators-legacy"
      ],
      "presets": ["env", "react"]
    }
  }
}

正如您所看到的，这使得将单个键绑定到事件非常容易，并且它不要求您有一个特定的输入字段。我想这是你想去的地方最简单的方法。如果您需要更多有关实现的详细信息，请进行注释。转换-装饰-遗产是您应该感兴趣的一部分，以使这个库的工作。

希望那有帮助，祝你好运！