Immettere il gestore di eventi chiave su react-bootstrap Componente di input

Question

Ho un componente Input con un pulsante (buttonAfter proprietà), ho impostato un gestore onClick associato al pulsante e quindi l'utente può digitare del testo e fare clic sul pulsante per attivare il diritto azione.

Tuttavia, vorrei che l'utente fosse in grado di premere il tasto [Enter] (codice di accesso 13) per ottenere lo stesso effetto del clic sul pulsante, solo per semplificare l'utilizzo dell'interfaccia utente.

Non riuscivo a trovare un modo per farlo, ovviamente ho provato onKeydown per registrare un gestore per l'evento key down ma è semplicemente ignorato.

Answer 1

Penso che questa domanda sia correlata a React stesso invece che react-bootstrap.

Guardate questo per alcuni principi fondamentali circa Reagire sistema di eventi: https://facebook.github.io/react/docs/events.html

Quando si utilizza onKeyDown, OnKeyPress o onKeyUp Reagire passerà al gestore un'istanza di dire oggetto "target" con le seguenti proprietà:

altKey booleano
numero charCode
... (per tutti si veda link qui sotto)

modo da poter fare qualcosa di simile:

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

Ho provato il codice sopra e funziona. Spero che questo sia utile per te.

bye

Answer 2

la questione può essere correlato React-bootstrap. React-bootstrap ha anche un modo per gestire l'istanza quando viene premuto un pulsante o tasto Invio o qualsiasi elemento del modulo.

Il codice qui sotto spiega come gestire un esempio, quando si preme enterkey senza il coinvolgimento di React Handlers. (E che lo rende fresco)

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

Reagire Bootstrap non supporta più elemento modulo di ingresso. Invece ha introdotto sotto gli articoli a vostra disposizione

Il componente FormGroup racchiude un controllo di modulo con spaziatura corretta, insieme al supporto per un'etichetta, un testo di guida e uno stato di convalida.

Avvolgere il controllo del modulo in un InputGroup, quindi utilizzare per i normali componenti aggiuntivi e per i componenti aggiuntivi del pulsante.

Il componente FormControl esegue il rendering di un controllo modulo con lo stile Bootstrap.

Riferimenti:

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