限制用户在反应金额字段中输入的值答案

【问题标题】：limit the value entered by user in amount field in react限制用户在反应金额字段中输入的值
【发布时间】：2020-12-01 14:01:35
【问题描述】：

我想限制用户，使他不能在输入值中输入超过 50000。我应该如何在反应中做到这一点？我在 onchange 事件中这样做。

 onPaymentAmountChanged = (e) => {

        let inputValue = e.target.value;
        if ( inputValue > Number(50000)) {
            console.log(inputValue);
            inputValue=inputValue.replace(/[^0-9.]/,"");
        }
}

但是上面的事情并没有让我限制这一点。请提出一些建议

【问题讨论】：

使用<input type="number" min="1" max="50000">即可。试图纠正用户的输入会出现很多问题，并且会产生糟糕的用户体验。您的目标应该是提供可操作的错误消息。
onblur 将值更改为 50000.00 这会有什么影响吗？我的意思是这也适用于 50000.00
为什么会变成50000.00？这听起来不像标准的浏览器行为。无论如何，小数点是否重要取决于您。重要的是停止尝试修复用户的输入，因为你只会让事情变得令人沮丧。

标签： javascript html reactjs regex validation

【解决方案1】：

onPaymentAmountChanged = (e) => {
  const inputNumber = parseInt(e.target.value); //parseFloat if you have decimals
  if (Number.isNaN(inputNumber)) {
    console.log(0) // set default state for NAN inputs
  } else if (inputNumber > 50000) {
    console.log(50000) // set state = max value for larger inputs 
  } else {
    console.log(inputNumber)
  }
}

【讨论】：

【解决方案2】：

使用反应状态改变输入值

示例：

import React, {useState} from 'react';

export default function MaxInputValue() {

    const [value, setValue] = useState(10); // default value 10 you can change this

    function handleChange(e) {
        if (Number(e.target.value) > 50000)
            return console.log("more than 50000"); // return if more than 50000

        // else set the input value
        setValue(Number(e.target.value));
    }

    return (
        <div>
            <input value={value} onChange={handleChange}/>
        </div>
    )
}

【讨论】：

您需要传递类型号来输入或验证 onChange。你不应该设置setValue(50000)，你应该只设置return，因为如果用户想输入32456并错误地输入了另一个数字，那么你将值设置为5000，用户将不得不重新输入。