web-dev-qa-db-fra.com

Comment obtenir les valeurs de champ de saisie lorsque vous appuyez sur la touche Entrée dans react js?

Je souhaite transmettre les valeurs textfield lorsque l'utilisateur appuie sur la touche Entrée du clavier. Dans l'événement onChange(), j'obtiens la valeur de textbox, mais comment obtenir cette valeur lorsque la touche enter est enfoncée? 

Code:

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}
javascriptreactjsmaterial-ui
14
Soumya Behera

Utilisez l'événement onKeyDown et vérifiez à l'intérieur le code de la touche sur laquelle l'utilisateur a appuyé. Le code clé de la clé Enter est 13, vérifiez le code et mettez la logique là. 

Vérifiez cet exemple:

class CartridgeShell extends React.Component {

   constructor(props) {
      super(props);
      this.state = {value:''}

      this.handleChange = this.handleChange.bind(this);
      this.keyPress = this.keyPress.bind(this);
   } 
 
   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   keyPress(e){
      if(e.keyCode == 13){
         console.log('value', e.target.value);
         // put the login here
      }
   }

   render(){
      return(
         <input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange} fullWidth={true} />
      )
    }
}

ReactDOM.render(<CartridgeShell/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id = 'app' />

Remarque: Remplacez l'élément input par Material-Ui TextField et définissez les autres propriétés également.

24
Mayank Shukla

Ajouter sur KeyPress fonctionnera avec Change in Text Field.

<TextField
  onKeyPress={(ev) => {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>
5
sunaina kotekar

html

<input id="something" onkeyup="key_up(this)" type="text">

script

function key_up(e){
    var enterKey = 13; //Key Code for Enter Key
    if (e.which == enterKey){
        //Do you work here
    }
}

La prochaine fois, essayez de fournir du code.

0
manish