React-Number-Format 将值作为浮点数传递给验证

问题描述

我有一个 react-hook-form 表单和验证。我想要做的是使用 react-number-format 格式化输入，同时将浮点值传递给验证并提交。

这是代码和框： https://codesandbox.io/s/keen-field-26ub7

在 InvoiceData.js 中有一个 react-number-format 正在使用的输入。我想根据上面的值 (grossValue) 验证此输入，但我认为如果不解析该值以再次浮动，我就无法做到这一点。

解决方法

第一个解决方案

在 NumberFormat 内部创建一个 InvoiceData 类并使用相同的格式化道具，以检索其 removeFormatting 函数

InvoiceData.js

const getProperties = ({ invoice,register,errors }) => ({
  customInput: TextField,inputRef: register,variant: "outlined",name: "amountToPay",label: "InvoiceData.amountToPay",helperText: ((errors || {}).amountToPay || {}).message,error: (errors || {}).amountToPay,thousandSeparator: " ",suffix: " PLN",defaultValue: (invoice || {}).amountToPay,decimalScale: 2,fixedDecimalScale: true
});

export const removeFormatting = (value,props = {}) => {
  const properties = getProperties(props);
  let res = Number.parseFloat(
    new NumberFormat(properties).removeFormatting(value)
  );
  if (properties.decimalScale) {
    return res * Math.pow(10,-properties.decimalScale);
  }
  return res;
};

然后您可以使用该函数来检查您提交的表单是否有效：

Form.js

const onSubmit = async (data) => {
  if (removeFormatting(data.amountToPay) === responseData.amountGross) {
    // action when valid
    console.log("valid");
  } else {
    // action when invalid
  }
};

使用此链接查看修改后的代码： https://codesandbox.io/s/heuristic-paper-4ycuh

第二种解决方案

使用状态来记住 amountToPay 如下：

const [amountToPay,setAmountToPay] = useState(responseData.amountToPay)

向您的 InvoiceData 组件添加回调函数并使用 onValueChange 中的 NumberFormat 调用该函数，例如:

const InvoiceData = ({...props,handleChanged} => {

  return (
    <NumberFormat
      // whatever props you need
      onValueChange={(value) => handleChanged(value.floatValue)}
    />
  );

}

然后您可以传递我们之前定义的 setAmountToPay，并以这种方式将其传递给 InvoiceData：

<InvoiceData
  // whatever props you need
  handleChanged={setAmountToPay}
/>

然后您可以按照以下方式验证您的提交

const onSubmit = async () => {
  if (amountToPay === responseData.amountGross) {
    // action when valid
    console.log("valid");
  } else {
    // action when invalid
  }
};

,

我想我已经找到了建立在 Alexandre ELIOT 在第二个解决方案中所做的基础之上的答案。 我没有将 amountToPay 传递给 onSubmit 函数，而是将它传递给 NumberFormat 本身。

<NumberFormat
        customInput={TextField}
        inputRef={register}
        variant="outlined"
        name="amountToPay"
        label={t('InvoiceData.amountToPay')}
        helperText={
          /* eslint-disable-next-line */
          amountToPay> invoice.amountGross
            ? 'cannot be greater that amount gross'
            : amountToPay=== 0
            ? 'cannot be 0'
            : null
        }
        error={amountToPay> invoice.amountGross || amountToPay=== 0}
        thousandSeparator={' '}
        suffix=" PLN"
        defaultValue={invoice.amountToPay}
        onValueChange={(value) => handleValueChange(value.floatValue)}
        decimalScale={2}
        fixedDecimalScale
      />