Hoe krijg ik de TextField-waarde als de enter-toets wordt ingedrukt in Reageren?

Ik wil TextField-waarden doorgeven wanneer de gebruiker op de enter-toets drukt vanaf het toetsenbord. In de gebeurtenis onChange()krijg ik de waarde van het textbox, maar hoe krijg ik deze waarde wanneer de toets Enterwordt ingedrukt?

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

Antwoord 1, autoriteit 100%

Gebruik de gebeurtenis onKeyDownen controleer daarin de sleutelcode van de door de gebruiker ingedrukte toets. Sleutelcode van Entersleutel is 13, controleer de code en zet de logica daar.

Controleer dit voorbeeld:

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

Snippet uitvouwen


Antwoord 2, autoriteit 45%

Het toevoegen van onKeyPress werkt bij Wijzigen in tekstveld.

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

Antwoord 3, autoriteit 2%

MUI v5-update

Je kunt e.target.valuegebruiken om de huidige waarde van het inputelement te krijgen als je ongecontroleerdemodus.

<TextField
  onKeyPress={(e) => {
    if (e.key === 'Enter') {
      alert(e.target.value);
    }
  }}
/>

Livedemo

Codesandbox Demo


Antwoord 4

<input onKeyPress={onKeyPress}/> 
const onKeyPress = (e: any) => { if (e.which == 13) { // your function }};

Antwoord 5

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

Probeer de volgende keer eens wat code in te voeren.

Other episodes