Question

我有一个组件显示带有Items的List（本例中的名称），每个名称都包含在Item组件下的List组件下。

我想要实现的目标是能够导航＆＃34;在列表的项目中使用键盘箭头并输入按下以像鼠标一样点击 - 在Input组件中（在您使用箭头键获得的当前项目上），

问题在于我不确定如何解决这个问题，我尝试了几种方法，但每一种方法都陷入了死胡同。

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

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

谢谢你！

Answer 1

我认为其中一种方法可能是添加一个属性为itemPosition的状态。并将<List>个组件保存到ref。然后，您使用箭头增加或减少itemPosition，并通过ref选择childNodes[itemPosition]之类的项目。然后你按照类似的方式处理输入，然后只需在项目上调用.click()。

Answer 2

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

以有用且一致的方式处理按键是一个更大的问题，也是转向贡献代码的好时机。与滚动自己的系统相比，它几乎总能产生更好的结果。

对我来说，使用react-keydown库取得了很大的成功。我会说，它附带了一些额外的设置，因为你需要配置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"]
    }
  }
}

正如您所看到的，这使得将单个键绑定到事件非常容易，并且它不需要您具有焦点的特定输入字段。我认为这是最容易到达目的地的方式。如果您需要有关实施的更多详细信息，请回transform-decorators-legacy是你应该感兴趣的部分，以使这个库工作。

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

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

2 个答案: