0
294
ViewsHow to get the TextField value when enter key is pressed in React?
I want to pass TextField values when user press enter key from keyboard. In onChange() event, I am getting the value of the textbox, but How to get this value when enter key is pressed ?
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} />
)
}
}
·
Santiago Trujillo
3 answers
Answer question0
Use onKeyDown event, and inside that check the key code of the key pressed by user. Key code of Enter key is 13, check the code and put the logic there.
Check this example:
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' />Note: Replace the input element by Material-Ui TextField and define the other properties also.
·
Santiago Trujillo
Report
0
Adding onKeyPress will work onChange in Text Field.
<TextField
onKeyPress={(ev) => {
console.log(`Pressed keyCode ${ev.key}`);
if (ev.key === 'Enter') {
// Do code here
ev.preventDefault();
}
}}
/>
·
Santiago Trujillo
Report
0
You can use e.target.value to get the current value of the input element if you're using uncontrolled mode.
<TextField
onKeyPress={(e) => {
if (e.key === 'Enter') {
alert(e.target.value);
}
}}
/>
Live Demo
·
Santiago Trujillo
Report
Answer question