Javascript 限制用户在react中“金额”字段中输入的值

我想限制用户，使其在输入值中输入的值不能超过50000。我应该如何在react中实现这一点？ 我在onchange活动上做这件事

 onPaymentAmountChanged = (e) => {

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

---

但是上面的事情并没有让我限制这一点。请建议使用react state更改输入值

例如：

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>
    )
}

import React，{useState}来自“React”；
导出默认函数MaxInputValue（）{
const[value，setValue]=useState（10）；//默认值10您可以更改此值
功能手柄更改（e）{
如果（数量（如目标值）>50000）
return console.log（“超过50000”）；//如果超过50000则返回
//否则设置输入值
设置值（数字（如目标值））；
}
返回(
)
}

使用反应状态更改输入值

例如：

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>
    )
}

import React，{useState}来自“React”；
导出默认函数MaxInputValue（）{
const[value，setValue]=useState（10）；//默认值10您可以更改此值
功能手柄更改（e）{
如果（数量（如目标值）>50000）
return console.log（“超过50000”）；//如果超过50000则返回
//否则设置输入值
设置值（数字（如目标值））；
}
返回(
)
}

只要利用

。试图纠正用户的输入充满了问题，并产生了糟糕的用户体验。您的目标应该是提供可操作的错误消息。onblur值更改为50000.00会有任何影响吗？我的意思是，这在50000.00上也会起作用吗？为什么它会变为

50000.00

？这听起来不像是标准的浏览器行为。无论如何，小数点是否重要取决于你。重要的是停止尝试修复用户的输入，因为这样只会让事情变得令人沮丧。只需使用

。试图纠正用户的输入充满了问题，并产生了糟糕的用户体验。您的目标应该是提供可操作的错误消息。onblur值更改为50000.00会有任何影响吗？我的意思是，这在50000.00上也会起作用吗？为什么它会变为

50000.00

？这听起来不像是标准的浏览器行为。无论如何，小数点是否重要取决于你。重要的是停止尝试修复用户的输入，因为这只会让事情变得令人沮丧。您需要将类型number传递给input或validate onChange。您不应该设置

setValue（50000）

，您只应该

返回

，因为如果用户想要键入32456并错误地键入另一个数字，您将值设置为5000，用户将不得不重新键入。您需要传递类型编号以输入或在更改时验证。您不应该设置

setValue（50000）

，您只应该

返回

，因为如果用户想要键入32456并错误地键入另一个数字，您将值设置为5000，用户将不得不重新键入。