Problem
d, but I want it to be called when I press ‘Enter after entering the entire number. The validation function has the same issue: it calls too soon.
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
//bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
Asked by Bill Lumbert
Solution #1
You can listen to keyboard events like onKeyPress or onKeyUp, but not onChange, according to React Doc.
var Input = React.createClass({
render: function () {
return <input type="text" onKeyDown={this._handleKeyDown} />;
},
_handleKeyDown: function(e) {
if (e.key === 'Enter') {
console.log('do validate');
}
}
});
Here’s how to use React in your code. Component that does the same function
class Input extends React.Component {
_handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('do validate');
}
}
render() {
return <input type="text" onKeyDown={this._handleKeyDown} />
}
}
The jsfiddle may be found here.
const Input = () => {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
console.log('do validate')
}
}
return <input type="text" onKeyDown={handleKeyDown} />
}
Answered by wuct
Solution #2
You can use onKeyPress on an input field directly. When an input field is changed, the onChange function updates the state value, and when Enter is pushed, it calls a function search ().
<input
type="text"
placeholder="Search..."
onChange={event => {this.setState({query: event.target.value})}}
onKeyPress={event => {
if (event.key === 'Enter') {
this.search()
}
}}
/>
Answered by Admir
Solution #3
In most cases, pressing Enter in a form control (input) causes the form to submit (onSubmit). If you can handle it this way (having a submit button isn’t necessary if you only have one input):
When the following conditions are met, an implicit form submission (submit event on Enter) is performed:
You may read more about it here.
Alternatively you could bind your handler to the blur (onBlur) event on the input which happens when the focus is removed (e.g. tabbing to the next element that can get focus).
Answered by Luca
Solution #4
You can use event.key for this.
Answered by onmyway133
Solution #5
For the sake of completeness, here’s a solution for React users.
You can either update for each keystroke or obtain the data just when the form is submitted. Although adding the essential events to the component works, there are other options as suggested in the official documentation.
Components that can be controlled vs. those that can’t
Controlled
Forms and Controlled Components (from the Docs):
If you use a controlled component you will have to keep the state updated for every change to the value. For this to happen, you bind an event handler to the component. In the docs’ examples, usually the onChange event.
Example:
1) In the constructor, bind the event handler (value kept in state)
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) Design a handler function.
handleChange(event) {
this.setState({value: event.target.value});
}
3) Make a form submission function (value is taken from the state)
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) Render
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
If you’re using controlled components, your handleChange method will always be called to update and maintain the correct state. The state will always hold the most recent value, and the value will be obtained from the state when the form is submitted. If your form is too long, this could be a disadvantage because you’ll have to construct a function for each component or write a basic one that handles each component’s value change.
Uncontrolled
Uncontrolled component, according to the documentation
The primary difference is that instead of using the onChange function, you utilize the form’s onSubmit function to get the data and validate them if necessary.
Example:
1) In the constructor, bind the event handler and create a ref to the input (no value kept in state)
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2) Make a form submission function (value is taken from the DOM component)
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) Render
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
There’s no need to bind a handleChange function if you’re using uncontrolled components. When the form is submitted, the value is retrieved from the DOM, and any necessary validations can then be performed. There’s also no need to construct handler functions for any of the input components.
Your issue
Now for your problem:
Use an uncontrolled component if you wish to achieve this. If the onChange handlers aren’t required, don’t build them. The form will be submitted when the enter key is pressed, and the handleSubmit function will be called.
Changes you must make:
Remove the call to onChange in your element.
var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
// onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});
Take care of the form submission and make sure your information is correct. In the form submit function, obtain the value from your element and then validate. Make sure the reference to your element is created in the constructor.
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
Use of an uncontrolled component as an example:
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
Answered by c-chavez
Post is based on https://stackoverflow.com/questions/31272207/to-call-onchange-event-after-pressing-enter-key