如何在React Input输入框两侧添加不可编辑元素且不影响输入值？

核心思路是用容器包裹输入框和不可编辑的前后元素，通过CSS让它们视觉上融合成一个输入框，同时输入框只处理实际需要的业务值，前后元素仅作为视觉展示，不会影响输入框的最终值。

具体实现步骤 #

1. 样式调整
   给容器设置统一的边框、内边距，用flex布局让内部元素水平对齐；去掉输入框自身的边框和默认outline，避免视觉冲突；同时处理焦点状态，确保容器在输入框聚焦时能显示焦点样式。

.price-container {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  height: 36px;
}

.price-container input {
  border: none;
  outline: none;
  flex: 1;
  padding: 0 4px;
}

.price-container:focus-within {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.price-prefix, .price-suffix {
  color: #666;
  font-size: 14px;
}

2. 修改React组件
   在容器内添加前缀和后缀元素，输入框依然绑定原有的discountPrice状态，前后元素仅做静态展示。

const ProductPrice = () => {
  const [info, setInfo] = useState({
    discountPrice: '',
  });
  
  const handleChange = (e) => {
    const value = e.target.value
    setInfo({
      ...info,
      [e.target.name]: value
    })
  }

  return (
    <div className='price-container'>
      <span className="price-prefix">¥</span>
      <input
        name='discountPrice'
        type='number'
        placeholder='请输入价格'
        onChange={handleChange}
        value={info.discountPrice}
      />
      <span className="price-suffix">元</span>
    </div>
  );
};

关键说明 #

• 输入框的value始终只维护业务需要的数字值，前后的¥和元不会被包含在输入值中，完全不影响后续的表单提交或数据处理
• 通过focus-within伪类实现容器的焦点状态，保证交互体验的一致性
• 如果需要替换成图标，直接把<span>换成图标组件即可，样式逻辑保持不变

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