Question

我有一个包含多个input框（具有不同属性）的容器。我想改变所有这些的keydown行为。我想知道是否有更好的方法，而不是手动将onKeyDown={this.handleKeydown}属性放在每个<input>上。

由于ReactJS拥有自己的SyntheticEvent系统，我不想绑定可能会干扰ReactJS事件系统的正常javascript事件。

这可以用React吗？

Answer 1

想到两个选项

var props = {onKeyDown: this.handleKeyDown};
return (
  <input {...props} name="foo" />
  <input {...props} name="bar" />
  <input {...props} name="qux" />
);

您可以创建自定义组件

var MyInput = React.createClass({
  handleKeyDown: function() {
    // ...
  },
  render: function() {
    return (
      <input onKeyDown={this.handleKeyDown} />
    );
  }
});

然后在另一个组件中使用它

render: function() {
  return (
    <MyInput name="foo" />
    <MyInput name="bar" />
    <MyInput name="qux" />
  );
}

Answer 2

另一种方法是将onKeyDown={this.handleKeydown}放在包含所有<input>的组件上，但其适用性取决于同一容器中的其他内容（其他输入和可聚焦元素）。

以编程方式绑定事件（SyntheticEvent）

2 个答案: