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
- Accessing Data in Object over http put request
- Ionic React Controllers(Framework delegate issue while using Controllers)
- I can't judge the screen size in real time when SSG with next.js
- ReactJS - Infinite Loop calling Wrapped Method
- react-table sorting not working for column with custom cell
- Can't upload multiple files by using Multer on React
- Recharts render pie chart vertically
- html2canvas dynamically rendered div
- onDrop event not fired in react app
- React hide dropdown menu when lose focus
- How does react-router keep components from unmounting with route changes?
- Facing issues in calling one js file from another file in node js?
- React: Module not found: Error: Can't resolve 'react/lib/update'
- Global Variable Lifespan in Javascript
- Correct way (if possible) to store JSX code into a Javascript variable
- Error. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- Shorthand Modal content not working with HTML tags in React Semantic UI
- Log setState calls
- Get updated state of the component outside the render
- Radio button error for name attribute in React
- Error: Cannot find module '\react-scripts\bin\react-scripts.js'
- React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
- How do I run a React App without JS Node just vanilla VSC for a class
- Nesting buttons in Material UI: how to disable ripple effect of container button while clicking on a child button?
- How do I attach CSS styles based on React Component Prop?
- react.js ant design range filter with start and end dates error
- Range bar in redux form
- In React, how can I add a copy-to-clipboard functionality, by writing a simple function without any files imported?
- Including an image in imported css file in react using webpack
- HTML or Script Interpretaion in React and normal HTML