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