React: reset the input value on space pressed - reactjs

Question

I am new in React. In my react component, I have an input, and i need to reset the value of input to "" when the user press space button.
You can consider the component as following:
import React,{Component} from 'react';
export default class InputReceiver extends Component{
render(){
return(
<div className="col-sm-10">
<input type="text" className="form-control" onChange={this.props.inputHandler}/>
</div>);
}
}
Is it true that, i have to make it in the action?
but the action does not understand the input.
Point:
I should not use jQuery.

Answer 1

Using React Hooks, you can do the following:
Use the onKeyDown attribute on < input /> field to record each key press. Check if the pressed key is a space ( ASCII value 32 in this case ), and reset the input field.
const InputField = () => {
const [inputValue, setInputValue] = React.useState("");
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleSpace= (e) => {
if (e.keyCode === 32) {
setInputValue("");
}
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
onKeyDown={handleSpace}
/>
<p>Entered value: {inputValue} </p>
</div>
);
};
Note: KeyboardEvent.keyCode has been deprecated. Instead, use KeyboardEvent.key.
In the above example, it would be:
const handleSpace= (e) => {
if (e.key === " ") {
setInputValue("");
}
};

Answer 2

Use onKeyDown to call a function that detect the pressing of spacebar. If spacebar is pressed fire an action that reset the value of input.
Component
import React,{Component} from 'react';
import * as action from './path/to/action';
class InputReceiver extends Component{
detectSpacePresent = (e) => {
if(e.keyCode == 32) {
this.props.changeInputValue('');
}
}
render(){
return(
<div className="col-sm-10">
<input type="text" className="form-control" value={this.props.inputValue} onChange={this.props.inputHandler} onKeyDown={this.detectSpacePresent}/>
</div>);
}
}
function mapStateToProps(state) {
return {
inputValue: state.inputValue;
}
}
function mapDispatchToProps(dispatch) {
return {
changeInputValue: bindActionCreator(action, dispatch);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(InputReceiver);
Action
export function changeInputValue(val) {
return {type:'CHANGE_INPUT_VALUE', data: val}
}
Reducer
export const = (state = {}, action) {
switch(action.type) {
case 'CHANGE_INPUT_VALUE':
return {inputValue: action.data}
}
}

Answer 3

You really don't need to have redux. People started taking redux for granted. You could simply use a onChange handler in the InputReceiver component and call the inputHandler from it. The example below should explain.
Hope it helps!
class InputReceiver extends React.Component{
constructor(props) {
super(props)
this.state = {
value : ''
}
this.onChange = this.onChange.bind(this)
}
onChange(e){
const val = e.target.value
const lastChar = val[val.length - 1] //take only the last character
if(lastChar === ' ') //check if the last character is a <space>
this.setState({value: ''}) //if yes, reset value
else
this.setState({value: val})//if no, save the value
this.props.inputHandler && this.props.inputHandler(e)
}
render(){
return(
<div className="col-sm-10">
<input type="text" className="form-control" value={this.state.value} onChange={this.onChange}/>
</div>);
}
}
class App extends React.Component{
inputHandler(e){
console.log('called inputHandler')
}
render(){
return <InputReceiver inputHandler={this.inputHandler} />
}
}
ReactDOM.render(<App/>, 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"></div>