无法限制输入类型号的最大长度和最小长度答案

【问题标题】：Unable to limit the maxlength and minlength for input type number无法限制输入类型号的最大长度和最小长度
【发布时间】：2022-01-03 00:19:15
【问题描述】：

JSX:

    const input = (props) => {
  return (
    <div>
      <span className="input-icon">{props.icon}</span>
      <input
        type={props.type || "number"}
        className={props.inputClassName || "main-input"}
        {...props.attributes}
      />
    </div>
  );
};
CSS:
.main-input {
  width: 100%;
  height: 2rem;
  padding: 4px 5px 4px 0;
  border: none;
  caret-color: hsl(183, 100%, 15%);
  outline: none;
  color:hsl(183, 100%, 15%);
  font-weight: bolder;
  font-family: inherit;
  font-size: 1.1rem;
}
.main-input:focus {
  border-bottom: hsl(184, 14%, 56%) solid 1.5px;
}

.main-input::-webkit-outer-spin-button,
.main-input::-webkit-inner-spin-button {
  -webkit-appearance: none; 
}
.main-input[type="number"] {
  -moz-appearance: textfield;
  text-align: right;
}
.input-icon {
  position: absolute;
  padding: 5px 0 0 10px;
  font-weight: bolder;
}

.card-label{
    font-size: 10px;
    color: hsl(186, 14%, 43%);
}

我已更改数字类型输入并使用外观 CSS 属性删除了计数器。但现在我试图将（最大长度）限制为 5，将最小长度限制为 1，并且不允许使用减号（如图所示）值。如果有人知道解决方案，请发表评论或提出任何建议。

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

在输入中添加 onChange 回调，并防止在输入中添加任何非数字的内容。

【讨论】：

对于负值问题已解决。但是，对于 maxlength 和 minlength 有什么解决办法吗？
据我所知不是没有 javascript
如果你也知道 JS 中的任何解决方案。请在这里发表评论。提前致谢
我要做的是添加onChange 回调，并获取输入event.target.value 的值 - 如果它包含超出限制的数字，我只需将其替换为之前的“物有所值。也许是这样的 - codesandbox.io/s/priceless-lamport-bpstk ？