限制用戶在反應中的金額字段中輸入的值

Question

我想限制用戶，使他不能在輸入值中輸入超過 50000。 我應該如何實現這一目標？ 我在 onchange 事件上這樣做。

 onPaymentAmountChanged = (e) => {

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

但是上面的事情並沒有讓我限制這個。 請提出建議

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

Answer 2

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