在 react-bootstrap 输入组件上输入按键事件处理程序

Question

我有一个带有按钮的 Input 组件 (buttonAfter 属性)，我设置了一个与按钮关联的 onClick 处理程序，因此用户可以键入一些文本然后点击按钮触发正确的动作。

但是，我希望用户能够按 [Enter] 键（键码 13）来实现与单击按钮相同的效果，只是为了使 UI 更易于使用。

我找不到方法，当然我尝试 onKeydown 为按键事件注册一个处理程序，但它被忽略了。

Answer 1

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

看看这个关于 React 事件系统的一些基础知识：https://facebook.github.io/react/docs/events.html

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

布尔值 altKey
数字字符代码
...（全部参见上文 link）

所以你可以这样做：

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

问题也可能与 React-bootstrap 有关。 React-bootstrap 还有一种方法可以在按下按钮或回车键或任何表单元素时处理实例。

下面的代码解释了在没有 React 处理程序参与的情况下如何在按下回车键时处理一个实例。（这很酷）

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 中，然后用于普通加载项和按钮加载项。

FormControl 组件呈现具有 Bootstrap 样式的表单控件。

参考文献：

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

Answer 3

Uncaught TypeError: Cannot read property 'charCode' of undefined

你必须使用：

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

Answer 4

在表格中的正确方法与常规方法相同 JavaScript:

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

执行此操作的功能组件

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

Answer 5

已经建议的解决方案的简化版本是：

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。

在 react-bootstrap 输入组件上输入按键事件处理程序

Enter key event handler on react-bootstrap Input component

reactjs

react-bootstrap