Введите обработчик ключевых событий в компоненте ввода react-bootstrap

Я думаю, что этот вопрос связан с самим React, а не с реакцией-загрузкой.

Посмотрите здесь некоторые основы системы событий React: https://facebook.github.io/react/docs/events.html

Когда вы используете onKeyDown, onKeyPress или onKeyUp, React передаст вашему обработчику экземпляр скажем «целевого» объекта со следующими свойствами:

boolean altKey
number 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'));

Я проверил приведенный выше код, и он работает. Я надеюсь, что это полезно для вас.

Вопрос также может быть связан с 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 больше не поддерживает элемент формы ввода. Вместо этого он представил ниже предметы в вашем распоряжении

Компонент FormGroup оборачивает элемент управления формы с правильным интервалом, а также поддерживает метку, текст справки и состояние проверки.

Оберните элемент управления формы в InputGroup, а затем используйте его для обычных надстроек и надстроек кнопок.

Компонент FormControl визуализирует элемент управления формы с использованием стилей Bootstrap.

Использованная литература:

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

Правильный способ сделать это в форме такой же, как и в обычном 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>
  );

Uncaught TypeError: невозможно прочитать свойство charCode неопределенного

Вы должны использовать:

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

Несколько сокращенный вариант уже предложенных решений:

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()} обеспечит вызов handleSubmit при нажатии клавиши Enter.