检查react输入表单中的小数并更改数值

import React, { useState } from 'react';

function DecimalInputForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    const inputValue = event.target.value;
    // 在这里进行小数检查并更改数值
    setValue(inputValue);
  };

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

export default DecimalInputForm;

const handleChange = (event) => {
  const inputValue = event.target.value;
  const decimalRegex = /^\d+(\.\d+)?$/; // 正则表达式用于匹配小数

  if (decimalRegex.test(inputValue)) {
    // 输入值是小数
    // 在这里进行相应的处理，例如保留指定位数的小数或进行四舍五入等
    setValue(inputValue);
  } else {
    // 输入值不是小数
    // 在这里进行相应的处理，例如提示用户输入正确的小数值
  }
};

import NumberFormat from 'react-number-format';

function DecimalInputForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    const inputValue = event.target.value;
    const decimalRegex = /^\d+(\.\d+)?$/;

    if (decimalRegex.test(inputValue)) {
      setValue(inputValue);
    } else {
      // 输入值不是小数
    }
  };

  return (
    <form>
      <NumberFormat
        value={value}
        onChange={handleChange}
        decimalScale={2} // 保留两位小数
        fixedDecimalScale={true} // 固定小数位数
        allowNegative={false} // 不允许负数
        thousandSeparator={true} // 使用千分位分隔符
        prefix="$" // 添加前缀
        placeholder="Enter a decimal value"
      />
    </form>
  );
}

export default DecimalInputForm;