Введите обработчик ключевого события в компоненте response-bootstrap.

У меня есть компонент Input с кнопкой (свойство buttonAfter), я устанавливаю обработчик onClick, связанный с кнопкой, и поэтому пользователь может ввести текст и нажать кнопку, чтобы запустить правильное действие.

Тем не менее, я хотел бы, чтобы пользователь мог нажать клавишу [Enter] (keycode 13), чтобы добиться того же эффекта, что и нажатие кнопки, чтобы упростить использование интерфейса.

Я не мог найти способ сделать это, конечно же, я попробовал onKeydown зарегистрировать обработчик для события key down, но он просто проигнорирован.

Ответ 1

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

Посмотрите на это для некоторых основ системы событий React: https://facebook.github.io/react/docs/events.html

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

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

Я тестировал выше код, и он работает. Надеюсь, это поможет вам.

до свидания

Ответ 2

Вопрос также может быть связан с React-bootstrap. React-bootstrap также имеет способ обрабатывать экземпляр, когда нажата кнопка или введите ключ или любой элемент формы.

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