如何为已禁用计数器的number输入框设置长度限制并禁止输入负值

可行实现方案如下，可根据你的使用场景选择： #

方案1：原生属性快速实现（无逻辑修改成本）

直接利用HTML number输入框的原生属性即可满足基础限制，你可以在封装的组件中默认给number类型输入框补充属性，也可以通过props.attributes透传：

const Input = (props) => {
  return (
    <div>
      <span className="input-icon">{props.icon}</span>
      <input
        type={props.type || "number"}
        className={props.inputClassName || "main-input"}
        {/* 仅number类型生效的限制属性 */}
        min={(props.type === 'number' || !props.type) ? 0 : undefined}
        max={(props.type === 'number' || !props.type) ? 99999 : undefined}
        step={1}
        {...props.attributes}
      />
    </div>
  );
};

注意：该方案的限制会在表单提交时触发校验，不会拦截用户输入过程中录入的不符合规则的内容。

方案2：输入实时拦截（用户体验最优）

通过onInput事件在用户输入时直接过滤无效内容，不会让非法内容出现在输入框中：

const Input = (props) => {
  const handleNumberInput = (e) => {
    let val = e.target.value;
    // 过滤所有非数字、负号字符
    val = val.replace(/[^0-9]/g, '');
    // 截断超过5位的内容
    if (val.length > 5) val = val.slice(0, 5);
    e.target.value = val;
    // 透传用户自定义的onInput事件
    props.attributes?.onInput?.(e);
  };

  return (
    <div>
      <span className="input-icon">{props.icon}</span>
      <input
        type={props.type || "number"}
        className={props.inputClassName || "main-input"}
        min={0}
        max={99999}
        onInput={(props.type === 'number' || !props.type) ? handleNumberInput : props.attributes?.onInput}
        {...props.attributes}
      />
    </div>
  );
};

小提示：React自定义组件首字母需要大写，建议你把原来的组件名从input改为Input，避免和原生input标签冲突

方案3：表单提交兜底校验

如果是在表单场景使用，可额外增加提交前的校验逻辑，避免极端场景下的非法值提交：

// 校验函数示例
const checkNumberValid = (val) => {
  if (!val || val.length < 1) return '请输入有效值';
  if (val.length > 5) return '最多可输入5位数字';
  if (Number(val) < 0) return '不可输入负值';
  return true;
}

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