如何阻止React Bootstrap/Material UI文本框按回车时插入URL GET参数

这问题我太熟悉啦！你遇到的情况是因为React Bootstrap的<Form>组件默认会绑定原生表单的提交行为——当你在表单内的输入框按下回车键时，浏览器会自动用GET方式提交表单，把所有表单控件的name和value拼到URL上，这就是你看到URL变成http://localhost:8080/home?listName=&welcome=&eventDate=的原因。

下面给你几个简单有效的解决方案，按推荐程度排序：

方案1：给Form添加onSubmit事件阻止默认行为 #

这是最直接的方法，既保留<Form>组件的样式和其他特性，又拦截默认提交动作：

<Form onSubmit={(e) => e.preventDefault()}>
  <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>

原理：e.preventDefault()会阻止浏览器执行表单提交的默认逻辑，不管是按回车还是点击原生提交按钮，都不会触发URL变更了。

方案2：替换<Form>为普通容器组件 #

如果你的表单本来就不需要原生表单的任何功能（比如你已经用自定义的onClick处理Purchase逻辑），直接把<Form>换成普通的<div>或者React Bootstrap的容器组件（比如<Container>、<Card.Body>）就行：

<div>
  <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>
</div>

原理：去掉原生表单的包裹，自然就不会触发默认提交行为了，而<Form.Group>只是样式组件，完全可以独立使用。

方案3：给单个TextField拦截回车事件（不推荐批量使用） #

如果只需要针对某个输入框禁用回车提交，可以给TextField添加onKeyDown事件：

<TextField 
  name="listName" 
  variant="outlined" 
  value={this.state.listName} 
  onChange={this.handleChange} 
  label="Name of List" 
  fullWidth
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  }}
/>

注意：这个方法需要给每个需要拦截的TextField都加事件，表单项多的话会很繁琐，所以优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者bahij zeineh