score:124
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.
score:0
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
}
}
Next time, Please try providing some code.
score:1
<input onKeyPress={onKeyPress}/>
const onKeyPress = (e: any) => { if (e.which == 13) { // your function }};
score:4
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
score:63
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();
}
}}
/>
Source: stackoverflow.com
Related Query
- How to get the TextField value when enter key is pressed in React?
- How do I get my React TextField to open the number pad when inputting on a mobile device?
- How to get the TextField value with onclick button event React Material UI
- How to get the value from enum by a numeric key in React
- How do I get the key of a value in a Typescript Record
- How to check when the react components get rendered or rerendered
- How do I get the value of the pressed button on a Formik form?
- React js call to a function when enter key is pressed
- How can I get the value from an animated or interpolated value in React Native?
- how to get the key of a selected value from a dropdown in reactjs?
- How to get the selected value from a radio button group in React where there are multiple groups?
- How to Disable the ENTER Key in React Material UI Autocomplete form
- How to get value when React wraps content in spans?
- How to avoid submitting in the form of react-bootstrap-validation when press the enter key
- React - How to clear the value of a React-Select when another React-Select changes
- How get the value of {match.params.id} on react router
- How should i get the value from custom attribute in react element?
- How to get the value of the span element with testid using react testing library?
- React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?
- Clicking a link when enter key is pressed using React
- How to get the object key it has the value
- How to update specific value when the state is an array of objects - React
- How to clear TextField after ENTER key press in React
- How to get the value of selected option from React hooks?
- React Recoil selector not triggering its get when the atom state updates to a previous value
- How to get the value of react component - AceEditor
- How to get the value of DateRangePicker (syncfusion) on react js
- Ionic/React - How to get value from input item when it is auto-filled by the browser?
- How to get the value of HTML5 data-attribute in react js
- In React JS, how to get value from multiple input fields when one of them is changed
More Query from same tag
- Why does the 'same' code looks different in the same browser with the same size, where one deployment is on localhost and the other remote
- Comparing React JSX to generated HTML with Jest/Enzyme
- How to set object value one by one in into text field using map function in reactjs
- React-native image with animated background as loader
- How can I access data attribute value using useRef hook?
- How to migrate a template from Handlebar to React's JSX
- Fetch blob downloaded status in a function
- ReactJS - UseRef, instead of useState, to replace props
- Material-UI Rating returns string instead of number
- React hook - `useEffect` with clean up
- New RxJS subscription gets created during page hot module replacement
- "TypeError: kinds.map is not a function." React.js
- Make one true while others in object to false in react hooks
- Auth0: How to add custom properties to UserObject?
- React className remove and add
- how can I import components in next within a route
- Why is re-run only updating props one time with react-hooks-testing-libary?
- Insert Material-UI Icon into Input Field in React
- Loading result of a useState Array
- Redux-saga with Internet Explorer
- How to upgrade from react-router to react-router-dom?
- Detect If Function Runs on Another Component in React
- Using Jest to mock AJAX requests for React
- Conditionally rendering multiple components -- which style is more readable?
- How to Change pages via react Router with Bootstrap Dropdown?
- Hide header on StackNavigator with React Navigation in React Native
- Alert not showing on browser close after doing reload of the browser, same issue is there in stackoverflow website also
- React UserContext: Conditional in useEffect is being ignored
- React.js not accurate with setState
- Create a mask for 14 digits number