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会向你的处理程序传递一个say＆＃34; target＆＃34;的实例。具有以下属性的对象：

boolean 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

这个问题也可能与React-bootstrap有关。当按钮或输入键或任何表单元素被按下时，React-bootstrap也有办法处理实例。

下面的代码解释了在没有React Handlers参与的情况下按下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>
    );
  }
}

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

以正确的方式完成表单的方式与常规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 4

未捕获的TypeError：无法读取未定义的属性'charCode'

您必须使用：

strArray[0]

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输入组件上输入键事件处理程序

5 个答案: