Angular自定义PercentInput组件：复用Bootstrap百分比输入表单

嘿，这种重复编写冗长Bootstrap输入组代码的烦恼我太懂了！尤其是做带百分比输入的表单时，每个字段都要套一遍<div class="input-group">、加后缀的%标签，不仅写起来麻烦，后续要调整逻辑（比如限制输入范围、格式化数值）的时候，还得挨个修改所有相关字段，效率极低。

我之前遇到一模一样的场景，直接用React封装了一个PercentInput函数式组件，完美解决了这个问题。现在分享下我的思路：

组件核心设计思路 #

这个组件的关键就是和原生<input>保持完全一致的行为——只是把DOM结构替换成了Bootstrap的输入组样式，这样你在使用它的时候，就像用普通输入框一样自然，完全不需要额外学习成本。

比如我写的简化版组件实现：

import React from 'react';

const PercentInput = ({ value, onChange, className, ...restProps }) => {
  // 统一处理百分比输入的逻辑，后续要加范围校验、数值格式化都在这里改
  const handleInputChange = (e) => {
    // 举个例子：限制输入值在0-100之间
    const inputValue = e.target.value;
    if (inputValue === '' || (!isNaN(inputValue) && inputValue >= 0 && inputValue <= 100)) {
      onChange?.(e);
    }
  };

  return (
    <div className={`input-group ${className || ''}`}>
      <input
        type="number"
        className="form-control"
        value={value}
        onChange={handleInputChange}
        {...restProps} // 透传所有原生input的属性，比如placeholder、disabled等
      />
      <span className="input-group-text">%</span>
    </div>
  );
};

export default PercentInput;

为什么组件不用关心使用场景？ #

因为它只专注于**“提供符合Bootstrap风格的百分比输入能力”**这一件事：

• 它把所有原生input的属性都透传了，不管你需要加placeholder、disabled，还是绑定表单状态（比如用Formik、React Hook Form），直接像用普通input一样传属性就行。
• 所有和百分比相关的逻辑（比如校验、格式化）都封装在组件内部，后续要调整的话，只需要修改这一个组件，所有用到它的表单字段都会同步更新，完全不用考虑它是在哪个表单里被使用的。

现在用的时候就超简单，比如在表单里：

// 导入组件后直接用
<PercentInput 
  value={formData.discount} 
  onChange={(e) => setFormData({...formData, discount: e.target.value})}
  placeholder="请输入折扣百分比"
/>

这样一来，代码复用性拉满，后续维护也省心太多了！

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