使用具有 react-number-format 的组件将 Material-ui 版本从 4 升级到 5 后出现问题

Question

我将 material-ui 版本从 v4 更新到 v5，但我在使用 react-number-format 库的组件中遇到问题，显然问题与转发refs，但是我解决不了，谁能帮帮我？

浏览器错误：道具类型失败：提供给 ForwardRef(InputBase)

的道具 inputComponent 无效

感谢您的帮助！

FormikTextNumber

import React from "react";
import { NumberFormatValues } from "react-number-format";
import { TextField, TextFieldProps } from "@mui/material";
import { Field, useField } from "formik";
import NumberFormatCustom from "./number-format";

type FormikTextNumberProps = TextFieldProps & {
  name: string;
  suffix: string;
  setFieldValue: any;
};

const FormikTextNumber = (props: FormikTextNumberProps): React.ReactElement => {
  const { name, prefix, suffix, setFieldValue, ...rest } = props;

  const [, { touched, value, error }, { setValue }] = useField(name);
  const isError = Boolean(error) && touched;

  const handleChange = (values: NumberFormatValues) => {
    setValue(values?.floatValue ?? "");
    if (setFieldValue) {
      setFieldValue(values?.floatValue ?? "");
    }
  };

  return (
    <Field
      {...rest}
      name={name}
      value={value}
      size="small"
      margin="dense"
      variant="outlined"
      autoComplete="off"
      as={TextField}
      onChange={null}
      error={isError}
      helperText={isError ? error : undefined}
      InputProps={{
        inputComponent: NumberFormatCustom,
        inputProps: {
          onValueChange: handleChange,
          prefix: prefix,
          suffix: suffix
        }
      }}
    />
  );
};

export default FormikTextNumber;

NumberFormatCustom

import React from "react";
import NumberFormat, { NumberFormatProps } from "react-number-format";

interface NumberFormatCustomProps extends NumberFormatProps {
  inputRef: (instance: NumberFormat<any> | null) => void;
}

const NumberFormatCustom = (
  props: NumberFormatCustomProps
): React.ReactElement => {
  const { inputRef, ...rest } = props;
  return <NumberFormat {...rest} getInputRef={inputRef} />;
};

NumberFormatCustom.defaultProps = {
  thousandSeparator: ".",
  decimalSeparator: ",",
  allowNegative: true
};

export default NumberFormatCustom;

形式

import React from "react";
import { Formik, Form } from "formik";
import * as Yup from "yup";

import "./styles.css";
import InputNumberNew from "./components/InputNumberNew";
import InputNumberOld from "./components/InputNumberOld";
import { Box, Grid } from "@mui/material";

const validationSchema = Yup.object({
  old: Yup.number().required("error"),
  new: Yup.number().required("error")
});

const initialValues = {
  old: 0,
  new: 0
};

export default function App() {
  return (
    <div className="App">
      <h1>Upgrade Material-ui 4 to 5 with number-format </h1>
      <Formik
        initialValues={initialValues}
        onSubmit={(e) => {
          console.log(e);
        }}
        validationSchema={validationSchema}
      >
        {({ values, touched, errors, handleChange, handleBlur }) => {
          return (
            <Form>
              <Grid container>
                <Grid item xs={12}>
                  <Box color="green" mt={2}>
                    It's work
                  </Box>
                  <Box mb={0.5} color="green">
                    Material-ui 4
                  </Box>
                  <InputNumberOld
                    label="Material-ui 4"
                    name="old"
                    prefix={"$ "}
                  />
                </Grid>
                <Grid item xs={12}>
                  <Box color="red" mt={2}>
                    It's doesn't work
                  </Box>
                  <Box mb={0.5} color="red">
                    Material-ui 5
                  </Box>
                  <InputNumberNew
                    label="Material-ui 5"
                    name="new"
                    prefix={"$ "}
                  />
                </Grid>
              </Grid>
            </Form>
          );
        }}
      </Formik>
    </div>
  );
}

Answer 1

问题已通过更改组件 NumberFormatCustom 解决，如 Material-ui 迁移文档中所述 link.

import React from "react";
import NumberFormat, { NumberFormatProps } from "react-number-format";

interface NumberFormatCustomProps extends NumberFormatProps {
  ref: (instance: NumberFormat<any> | null) => void;
}

const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
  props: NumberFormatCustomProps,
  ref
): React.ReactElement {
  return <NumberFormat {...props} getInputRef={ref} />;
});

NumberFormatCustom.defaultProps = {
  thousandSeparator: ".",
  decimalSeparator: ",",
  allowNegative: true
};

export default NumberFormatCustom;