reactjs 在带有React Hook窗体的MUI中将输入掩码作为文本字段

8yparm6h  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(132)

我尝试使用MUI中的TextInput组件以及react-input-maskreact-hook-form中的MaskInput组件。一切似乎都运行正常,但我在控制台中收到一条关于使用引用的错误消息。我尝试使用useRef挂钩并直接选择第二个输入,以及使用useEffect挂钩注册输入,但错误仍然存在。您对如何解决此问题有什么想法吗?
反作用域开发. js:86警告:在StrictMode中不推荐使用findDOMNode。已向findDOMNode传递了StrictMode内部的InputElement2示例。请改为直接向要引用的元素添加ref。

import { useFormContext, Controller } from "react-hook-form";
import { Grid, TextField } from "@mui/material";
import InputMask from "react-input-mask";

const FormInputMask = ({ name, label }) => {
  const { control } = useFormContext();

  return (
    <Grid item xs={12}>
      <Controller
        control={control}
        name={name}
        defaultValue=""
        render={({ field }) => (
          <InputMask
            {...field}
            maskChar=""
            mask="999 999"
            label={label}
            variant="outlined"
            fullWidth={true}
          >
            {(inputProps) => (
              <TextField {...inputProps} />
            )}
          </InputMask>
        )}
      />
    </Grid>
  );
};

export default FormInputMask;
jdzmm42g

jdzmm42g1#

是的,这个包裹也有这个问题。我只是倾向于忽略这个问题。
但有办法解决这个问题。
1.从你的应用中删除React.StrictMode(不完全修复,但错误会消失)。
1.有一个分叉https://github.com/comigotech/react-input-mask,看起来问题已经解决了,但是我自己没有试过,不能保证。

相关问题