React 如何实现输入数字后自动在末尾追加%百分号

异常根源 #

原有实现直接将存储纯数值的状态和%字符串拼接，作为输入框的固定受控值。这种写法下，只要状态更新输入框就强制带百分号，哪怕用户刚输入第一位数字，%也会即时展示，完全做不到“输完目标数值、退出输入状态后再展示%”的要求。

调整步骤 #

核心逻辑是拆分输入框两种状态的展示规则，不要靠硬拼接实现：

• 在组件state中新增isInputFocused布尔值，用来标记输入框当前是否处于可编辑的聚焦状态
• 动态设置输入框的value：输入框聚焦时，只展示存的纯数值，不显示%；输入框失焦时，才在数值末尾拼接%展示
• 输入变更逻辑增加校验：过滤掉非数字、小数点的非法字符，保证state中存储的始终是纯数值，避免脏值带入后续拼接逻辑

可直接替换的代码参考：

// state 初始化需补充：isInputFocused: false
<InputBase
    className={`milestone-percent-rate`}
    autoComplete={"off"}
    placeholder={"20%"}
    maxLength="100"
    value={
      this.state.isInputFocused 
        ? this.state.percent_rate 
        : `${this.state.percent_rate}%`
    }
    onChange={(e) => {
      // 过滤非法输入，只保留数字和小数点
      const rawInput = e.target.value;
      const validInput = rawInput.replace(/[^\d.]/g, '');
      this.handleChange({ target: { value: validInput } }, "percent_rate")
    }}
    onFocus={() => this.setState({ isInputFocused: true })}
    onBlur={() => this.setState({ isInputFocused: false })}
/>

最终交互效果 #

• 用户点击输入框准备编辑时，末尾的%会自动消失，光标停在数值末尾，不会被符号干扰输入
• 输入过程中只显示用户输入的数字，不会提前弹出%
• 输入完成后点击页面其他区域让输入框失焦，%会自动追加到数值末尾，完全匹配预期

可选优化：可以在onChange的校验逻辑中补充规则，限制单个小数点、数值最大为100，避免输入异常的百分比值。

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