为何React-Bootstrap的FormGroup组件默认让子FormControl输入自动大写？

结论先行：FormGroup组件本身没有自动将输入转为大写的默认行为

你遇到的自动大写问题，和FormGroup的内置逻辑无关——react-bootstrap的FormGroup本质只是一个用于表单布局的容器组件，对应Bootstrap的.form-group样式类，仅负责间距、排版等布局相关的逻辑，不会修改子组件的输入行为。

可能的原因排查方向： #

• 全局CSS样式影响：这是最常见的情况。检查项目中是否有全局CSS规则给.form-group下的输入框设置了text-transform: uppercase，比如：

  .form-group input {
    text-transform: uppercase;
  }
  

  可以通过浏览器开发者工具查看FormControl元素的样式面板，确认是否继承了这类样式。
• 上层组件/全局逻辑干扰：可能你的InputField组件被某个高阶组件或父组件包裹，后者存在统一处理表单输入的逻辑，且仅在FormGroup存在时触发了大写转换。
• 浏览器/系统设置：极少数情况下，浏览器的自动更正或系统层面的输入设置可能导致大写，但这种情况通常和是否使用FormGroup无关，可以排除。

快速验证方案： #

给FormControl强制添加样式覆盖，看是否能解决问题：

<FormGroup>
  <FormControl type="text" style={{textTransform: 'none'}} />
</FormGroup>

如果这样输入不再自动大写，就可以确定是CSS样式导致的问题，接下来去找到对应的全局样式规则修改即可。

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