React组件实现输入框尾部固定显示%符号的需求及现有代码

方法一：纯CSS视觉实现（不修改输入值） #

这种方法通过容器伪元素添加%符号，输入框实际值不包含%，适合仅需视觉展示的场景。

import styled from 'styled-components';

// 定义输入框容器
const InputWrapper = styled.div`
  position: relative;
  display: inline-block;

  &::after {
    content: '%';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* 避免符号干扰输入框交互 */
    color: #666;
  }
`;

// 使用组件
<InputWrapper>
  <StyledBaseInput
    type="text"
    className="form-control"
    value={inputAmount}
    onChange={handleInputChange}
  />
</InputWrapper>

方法二：绑定值时添加后缀（实际存储纯数据） #

如果需要输入框显示带%，但实际存储的是纯数值，可在渲染时拼接%，并在输入处理时过滤掉%：

// 输入处理函数
const handleInputChange = (e) => {
  // 移除输入内容中的%，仅保留有效内容
  const cleanValue = e.target.value.replace(/%/g, '');
  setInputAmount(cleanValue);
};

// 渲染输入框
<StyledBaseInput
  type="text"
  className="form-control"
  value={`${inputAmount}%`}
  onChange={handleInputChange}
/>

两种方案按需选择：

• 方法一不影响输入值的逻辑处理，适合仅需展示后缀的场景；
• 方法二让输入框显示带%的内容，适合需要明确告知用户输入单位的场景。

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