title: React prevent form submission when enter is pressed inside input
body: <p>React prevent form submission when enter is pressed</p>
  
  <p>I have the following React Search Bar component where the parent container can call using</p>
  
  <pre><code>&lt;SearchBar onInputChange={this.handleInputChange} /&gt;
  </code></pre>
  
  <p>Everytime the user changes the input, the parent container will be notified. This is why my search bar does not need any submit button.</p>
  
  <p>However, I am finding that if I press enter inside my search bar, the whole page refreshes. And I dont want that.</p>
  
  <p>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</p>
  
  <pre><code>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 (
          &lt;div id="search-bar"&gt;
              &lt;form&gt;
              &lt;FormGroup controlId="formBasicText"&gt;
                  &lt;FormControl
                  type="text"
                  onChange={this.handleChange}
                  value={this.state.value}
                  placeholder="Enter Character Name"
                  /&gt;          
              &lt;/FormGroup&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          );
      }
  }
  
  export default SearchBar
  </code></pre>