进入上反应的自举输入组件的关键事件处理程序

Question

我有一个按钮（Input属性）的buttonAfter成分，我设置相关的按钮的onClick处理程序，因此用户可以键入一些文字和CLIC按钮来触发正确的行动。

不过，我想用户能够按[Enter]键（键代码13），以达到同样的效果，点击按钮，只是为了让用户界面更易于使用。

我无法找到一个方法来做到这一点，当然我想onKeydown以注册键按下事件的处理程序，但它仅仅是忽略不计。

Answer 1

我认为这个问题是反应本身，而不是反应，引导有关。

看看这个大约阵营事件系统的一些基础知识：https://facebook.github.io/react/docs/events.html

当您使用的onkeydown，onkeypress事件或的onkeyup阵营将传递到您的处理程序说“目标”对象具有以下属性的实例：

布尔方altKey 数则charCode ...（所有见上面的链接）

所以，你可以这样做：

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';

class TestInput extends React.Component {

handleKeyPress(target) {
  if(target.charCode==13){
    alert('Enter clicked!!!');    
  } 
}

render() {
  return (
    <Input type="text" onKeyPress={this.handleKeyPress} />
  );
 }
}

ReactDOM.render(<TestInput />, document.getElementById('app'));

我上面的代码测试，它的工作原理。我希望这是对你有帮助。

Answer 2

这个问题也可能与反应的自举。反应过来的自举也有一种方法来处理实例时曾经按钮或回车键或按下任何形式的元素。

下面的代码解释了如何在没有作出反应处理程序的参与按下enterkey处理的实例。（这使得它凉）

import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";

class TestInput extends Component {

  search() {
    console.log("Enter Button Pressed");
  }

  render() {
    return (
      <FormGroup>

        <InputGroup>
          <FormControl
            placeholder="Press Enter"
            type="input"
            onKeyPress={event => {
              if (event.key === "Enter") {
                this.search();
              }
            }}
          />
        </InputGroup>

      </FormGroup>
    );
  }
}

反应引导不支持输入表单元素了。相反，它下面将介绍项目，在您的处置

该FormGroup组件包装了适当的间距表单控件，与标签的支持，帮助文本，并验证状态一起。

环绕你表单控件在InputGroup，然后用正常的加载项和按钮加载项。

所述FormControl组件呈现与引导造型表单控件。

参考文献：

https://react-bootstrap.github.io/components.html#forms https://react-bootstrap.github.io/components.html#forms-input-groups

Answer 3

遗漏的类型错误：无法读取的未定义的属性“则charCode”

您必须使用：

handleKeyPress(target) {
  if (target.key === 'Enter') {
    alert('Enter clicked!!!');
  }
}