React prevent form submission when enter is pressed inside input

Question

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 

Answer 1

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(); }