如何在React/Reactstrap的Input组件中添加货币/美元前缀？

Reactstrap的Input组件本身确实没有内置的前缀配置项，但可以通过以下两种简单方法实现你想要的效果：

方法一：使用Reactstrap的InputGroup组件（推荐） #

利用Reactstrap配套的InputGroup和InputGroupText组件，这是最贴合Bootstrap设计规范的方式，样式会自动适配组件的各种状态：

import { Input, InputGroup, InputGroupText } from "reactstrap";

// 在你的组件中使用
<InputGroup>
  <InputGroupText>$</InputGroupText>
  <Input placeholder="请输入金额" />
</InputGroup>

方法二：自定义CSS实现 #

如果需要更灵活的样式控制，可以通过自定义CSS配合绝对定位来添加前缀：

组件代码 #

import { Input } from "reactstrap";
import "./CustomInput.css";

// 在你的组件中使用
<div className="input-with-prefix">
  <span className="prefix">$</span>
  <Input placeholder="请输入金额" className="prefix-input" />
</div>

对应的CustomInput.css样式 #

.input-with-prefix {
  position: relative;
  display: inline-block;
}

.prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d; /* 匹配Reactstrap默认Input的占位符颜色 */
}

.prefix-input {
  padding-left: 25px; /* 为前缀预留空间，避免输入内容被遮挡 */
}

两种方法里，第一种更推荐，因为它完全遵循了Reactstrap和Bootstrap的组件设计逻辑，无需额外维护自定义样式，还能自动适配如聚焦、禁用等组件状态。

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