wake-up-neo.com

Wie erhalte ich Werte für das Eingabefeld, wenn die Eingabetaste in rea js gedrückt wird?

Ich möchte textfield-Werte übergeben, wenn der Benutzer die Eingabetaste über die Tastatur drückt. Im onChange()-Ereignis erhalte ich den Wert der textbox, aber wie erhalte ich diesen Wert, wenn die enter-Taste gedrückt wird? 

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

Verwenden Sie das onKeyDown -Ereignis und überprüfen Sie darin den Tastencode der vom Benutzer gedrückten Taste. Der Schlüsselcode von Enter ist 13, überprüfen Sie den Code und legen Sie die Logik dort ab. 

Überprüfen Sie dieses Beispiel:

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' />

Hinweis: Ersetzen Sie das Element input durch Material-Ui TextField und definieren Sie auch die anderen Eigenschaften.

24
Mayank Shukla

Wenn Sie onKeyPress hinzufügen, wird onChange in Text Field geändert.

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

Nächstes Mal, bitte versuche es mit etwas Code.

0
manish