接受 1 到 99 数字的 JavaScript 方法答案

【问题标题】：JavaScript method to accept 1 to 99 number接受 1 到 99 数字的 JavaScript 方法
【发布时间】：2021-03-31 14:39:56
【问题描述】：

我正在开发一个要验证用户的应用程序。我只想接受从1 到99 的号码也需要在开始时避免0。我真的很努力，但没有找到任何解决方案。

有人可以帮我解决这个问题吗？谢谢。

<input
  max='99'
  min='1'
  type='number'
  placeholder='Enter Approved Discount'
  className='textInput'
  onChange={(e) => {
    finalPriceFunc(e.target.value, paymentPlan);
    setCondition({ ...checkCondition, showFinalPrice: true });
  }}
/>

【问题讨论】：

解决什么问题？你现在的代码到底有什么问题？
在您的实际 html 中什么不起作用？这对你正在寻找的东西很好。只是，我建议删除内联 javascript
@Pointy 其实我想实现接受1到99之间的数字
@LelioFaieta 这看起来更像 jsx 而不是 html
删除内联javascript，一切正常..

标签： javascript reactjs ecmascript-6

【解决方案1】：

输入最小值和最大值属性在提交表单后在表单内部起作用。但是如果你想只检查使用这个

Javascript：

          <input
              max="99"
              min="1"
              type="number"
              placeholder="Enter Approved Discount"
              className="textInput"
              onChange={(e) => {
                console.log(e);
                let v = parseInt(e.target.value);
                if (v < 1) e.target.value = 1;
                if (v > 99) e.target.value = 99;
              }}
            />

在 React 中你需要使用 setState 而不是 e.target.value

Demo

【讨论】：

"在 React 中你需要使用 setState 而不是 e.target.value" - 如果输入值不受控制，则不需要

【解决方案2】：

function sanitizeDiscountValue(elmNode) {
  console.log(elmNode.value);

  let value = parseInt(elmNode.value, 10);
  value = Math.abs(Number.isFinite(value) ? value : 1);

  elmNode.value = Math.min(Math.max(value, 1), 99);

  console.log(elmNode.value);
}
function handleDiscountChange(evt) {

  const value = sanitizeDiscountValue(evt.target);

  // finalPriceFunc(value, paymentPlan);
  // setCondition({ ...checkCondition, showFinalPrice: true });
}

function ApprovedDiscount() {
  return (
    <input
      max="99"
      min="1"
      type="number"
      placeholder="Enter Approved Discount"
      className='textInput'
      onChange={ handleDiscountChange }
    />
  );
}
ReactDOM.render(<ApprovedDiscount/>, document.querySelector("#react-root"));

.textInput[type="number"] {
  width: 33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react-root"></div>

【讨论】：

@ReactGuy ...关于消毒方法还有什么问题吗？