reactjs - color - react-bootstrap npm

Introduzca el controlador de eventos clave en el componente de entrada react-bootstrap

Question

Tengo un componente de Input con un botón (propiedad buttonAfter ), configuro un controlador onClick asociado al botón para que el usuario pueda escribir texto y hacer clic en el botón para activar la acción correcta.

Sin embargo, me gustaría que el usuario pudiera presionar la [Enter] (código de tecla 13) para lograr el mismo efecto que hacer clic en el botón, para facilitar el uso de la interfaz de usuario.

No pude encontrar una manera de hacerlo, por supuesto que intenté en onKeydown registrar un controlador para el evento de llave abajo pero simplemente se ignora.

Answer 1

No se detectó TypeError: no se puede leer la propiedad ''charCode'' de undefined

Tienes que usar:

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

Answer 2

Creo que esta pregunta está relacionada con React en lugar de reaccionar-bootstrap.

Mire esto para conocer algunos conceptos básicos sobre el sistema de eventos React: https://facebook.github.io/react/docs/events.html

Cuando use onKeyDown, onKeyPress o onKeyUp React pasará a su controlador una instancia de dicho objeto "objetivo" con las siguientes propiedades:

clave booleana
número charCode
... (para todos ver enlace arriba)

Así que puedes hacer algo como esto:

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

He probado el código anterior y funciona. Espero que esto sea útil para usted.

Answer 3

La pregunta también puede estar relacionada con React-bootstrap. React-bootstrap también tiene una forma de manejar la instancia cada vez que se presiona un botón o una tecla Intro o cualquier elemento del formulario.

El siguiente código explica cómo manejar una instancia cuando se presiona enterkey sin la participación de React Handlers (y eso hace que sea genial)

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 ya no admite el elemento de formulario de entrada. En su lugar, introdujo a continuación elementos a su disposición

El componente FormGroup ajusta un control de formulario con el espacio adecuado, junto con el soporte para una etiqueta, texto de ayuda y estado de validación.

Envuelva su control de formulario en un Grupo de entrada, luego utilícelo para complementos normales y para complementos de botón.

El componente FormControl representa un control de formulario con el estilo Bootstrap.

Referencias:

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