Currently, I am experimenting with triggering a response based on keypress events.
import React, {Component} from 'react';
import PropTypes from 'prop-types'
class ItemTextEdit extends React.Component {
constructor(){
super();
this.state = {
displayText: '',
isEditing: false
};
this.handleKeyPress = this.handleKeyPress.bind(this);
}
handleKeyPress(event) {
console.log(event.target.value);
if(event.key == 'Enter'){
console.log('enter press here! ')
}
}
componentDidMount(){
const { displayText} = this.props;
this.setState({ displayText });
}
render(){
return(
<span className="displayList">
<span><input name="inputValue" className="inputValue" value={this.state.displayText} type="text" onKeyDown={this.handleKeyPress} /></span>
</span>
)
}
}export default ItemTextEdit;
ItemTextEdit.PropTypes = {
displayText: PropTypes.string
}
I am encountering an issue where the console.log does not output any response. To troubleshoot, I have attempted removing additional methods in the component without success. My goal is to create an input field that reacts to keypress events. Even after using the "onKeyDown" function, the functionality remains unresponsive. Many online forums suggest binding the handler appropriately, which I'm already doing in the constructor. Any insights or suggestions would be greatly appreciated. Thank you.