React prevent form submission when enter is pressed inside input
javascript, reactjs
Solution
You need to create a form handler that would prevent the default form action.
The simplest implementation would be:
<form onSubmit={e => { e.preventDefault(); }}>
But ideally you create a dedicated handler for that:
<form onSubmit={this.submitHandler}>
with the following implementation
submitHandler(e) {
e.preventDefault();
}
Problem
React prevent form submission when enter is pressed I have the following React Search Bar component where the parent container can call using ``` <SearchBar onInputChange={this.handleInputChange} /> ``` Everytime the user changes the input, the parent container will be notified. This is why my search bar does not need any submit button. However, I am finding that if I press enter inside my search bar, the whole page refreshes. And I dont want that. I know if I have a button in the form, I could call event.preventDefault(). But in this case I have no button so I dont know what to do here ``` class SearchBar extends Component { constructor(props) { super(props); this.state = { value: '' }; this.handleChange = this.handleChange.bind(this) } handleChange(e) { this.setState({ value: e.target.value }); this.props.onInputChange(e.target.value); } render() { return ( <div id="search-bar"> <form> <FormGroup controlId="formBasicText"> <FormControl type="text" onChange={this.handleChange} value={this.state.value} placeholder="Enter Character Name" /> </FormGroup> </form> </div> ); } } export default SearchBar ```