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

import React, { useState } from 'react';

const AmountInput = () => {
  const [amount, setAmount] = useState('');

  const handleAmountChange = (e) => {
    const value = e.target.value;
    if (/^\d+(\.\d{0,2})?$/.test(value)) {
      setAmount(value);
    }
  };

  return (
    <input type="text" value={amount} onChange={handleAmountChange} />
  );
};

export default AmountInput;

import React from 'react';
import NumberFormat from 'react-number-format';

const AmountInput = () => {
  const handleAmountChange = (values) => {
    const { value } = values;
    // values对象包含了格式化后的值和原始值
    // 可以根据需要进行处理
  };

  return (
    <NumberFormat
      thousandSeparator={true}
      prefix={'$'}
      decimalScale={2}
      allowNegative={false}
      onValueChange={handleAmountChange}
    />
  );
};

export default AmountInput;