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 Enter
wordt 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 onKeyDown
en controleer daarin de sleutelcode van de door de gebruiker ingedrukte toets. Sleutelcode van Enter
sleutel 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.value
gebruiken om de huidige waarde van het input
element te krijgen als je ongecontroleerdemodus.
<TextField
onKeyPress={(e) => {
if (e.key === 'Enter') {
alert(e.target.value);
}
}}
/>
Livedemo
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.