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

第一个解决方案

在 InvoiceData 中创建一个 NumberFormat class 并使用相同的格式化道具，以检索其 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
  }
};

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

第二种解法

使用一个状态来记住amountToPay，例如：

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

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

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
  }
};

Answer 2

我想我已经找到了基于 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
      />

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

React-Number-Format pass value as float to validation

reactjs

material-ui

yup

react-hook-form

react-number-format