how to stop react bootstrap/@material ui from inserting get parameters in url on pressing enter in a text field

Question

I'm designing a basic form using react bootstrap and @material_ui/core elements

I've noticed if I press enter when I'm in one of the TextFields the URL is updated as follows:

originally:

http://localhost:8080/home

after pressing enter in TextField:

http://localhost:8080/home?listName=&welcome=&eventDate=

code in question:

<Form>
    <Form.Group>
        <TextField
            name="listName"
            variant="outlined"
            value={this.state.listName}
            onChange={this.handleChange}
            label="Name of List"
            fullWidth
        />
    </Form.Group>
    ...
    <Button variant="link" onClick={this.purchase}>Purchase</Button>
</Form>

The form and button are imported from 'react-bootstrap' the textfield is from '@material-ui/core'

I've searched and haven't found anything directly related to this so any help in disabling this functionality on pressing Enter would be appreciated.

Answer 1

It means that your form is submitted when you press Enter. If you want to prevent form submission, add this prop to the form element (within your Form Component code):

onSubmit={event => event.preventDefault()}