React-Bootstrap输入组件的回车键事件处理程序

Question

我有一个带有按钮（buttonAfter属性）的 Input 组件，我设置了与按钮相关联的 onClick 处理程序，以便用户可以输入一些文本并单击按钮来触发正确的操作。

但是，我想让用户能够按下 [Enter] 键（键码为13）来实现与单击按钮相同的效果，以使界面更易于使用。

我找不到方法来实现它，当然我尝试了 onKeydown 来注册按键按下事件的处理程序，但它被忽略了。

- mguijarr

---

此功能已经内置于表单中，只需使用type="submit"并用<form onSubmit={handler}>包装即可。https://dev59.com/qlsX5IYBdhLWcg3wHcXA#61173056 - Pawel

Answer 1

我认为这个问题与React本身有关，而不是react-bootstrap。

查看此处获取有关React事件系统基础知识的信息：https://facebook.github.io/react/docs/events.html

当您使用onKeyDown、onKeyPress或onKeyUp时，React将向您的处理程序传递一个名为"target"对象的实例，该实例具有以下属性：

布尔类型的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'));

我测试了上面的代码，它可以正常运行。希望对你有所帮助。

- baudo2048

---

谢谢提供链接，我不知道为什么之前没找到它！我的错误是使用了 onKeydown 而不是 onKeyDown。 - mguijarr

使用 charCode 已被遗弃，最好使用 char 而不是 charCode。 - Pratik Singhal

Answer 2

这个问题也可以与React-bootstrap相关联。React-bootstrap也有一种处理实例的方式，每当按下按钮、回车键或任何表单元素时。

下面的代码说明了如何在没有涉及React处理程序的情况下处理按下enter键时的实例。(这让它很酷)

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

React Bootstrap不再支持Input表单元素.相反,它向您提供了以下项目:

FormGroup组件用适当的间距包装表单控件，支持标签、帮助文本和验证状态.

在一个InputGroup中包装您的表单控件，然后使用<InputGroup.Append>来添加普通附加项以及<Button>来添加按钮附加项.

FormControl组件渲染具有Bootstrap样式的表单控件.

参考资料:

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

- Arif Ali Shaik

---

我认为onKeyPress属性实际上是React的一个特性，而Bootstrap的FormControl只是将它不使用的其他属性传递给input控件。因此，在这方面，Bootstrap间接支持onKeyPress。 - Ryan H.

24/10/2018：链接已失效 - bvdb

Answer 3

在表单中正确处理方式与常规JavaScript相同：

• 不要在按钮上使用onClick，而是使用type="submit"
• 表单应包装在 <form onSubmit={handler}>
• 处理程序应阻止页面重新加载 handler = (event) => event.preventDefault(); processForm()
• 现在，按钮和按下任何字段都将调用处理程序

这段函数组件可以实现以上操作：

    function register(event) {
      event.preventDefault()
      distpach(authActionCreator.register(username, email, password));
    }

    return (
      <Card>
        <form onSubmit={register}>
          <Card.Body>
            <Card.Title as="h4">Register</Card.Title>
              <FormGroup controlId="username">
                <FormLabel>Username</FormLabel>
                <FormControl type="text" label="Username" placeholder="Username" onChange={handleChange} />
              </FormGroup>
              <FormGroup controlId="email">
                <FormLabel>Email</FormLabel>
                <FormControl type="email" label="Email" placeholder="Email" onChange={handleChange} />
              </FormGroup>
              <FormGroup controlId="password">
                <FormLabel>Password</FormLabel>
                <FormControl type="password" label="Password" placeholder="Password" onChange={handleChange} />
              </FormGroup>
            <ButtonToolbar>
              <Button variant="primary" type="submit">Register</Button>
            </ButtonToolbar>
          </Card.Body>
        </form>
      </Card>
  );

- Pawel

---

这个干净多了，谢谢！ - undefined

Answer 4

以下是已经提出的解决方案的简化版：

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

const TestInput = () => {

   const handleSubmit = () => {
     /* handle form submit here */
   }

  return (
    <Input type="text" onKeyPress={event => event.key === "Enter" && handleSubmit()} />
  );
}

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

onKeyPress={event => event.key === "Enter" && handleSubmit()}会在按下“Enter”键时调用handleSubmit。

- codemonkey

Answer 5

未捕获的类型错误：无法读取未定义的属性“charCode”

你需要使用：

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

- Anass TIssir