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

Question

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

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

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

Answer 1

我想我已经在 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
      />