Javascript 通过道具接收到的MaskedInput文本未正确显示

我有一个材料界面

OutlinedInput

，上面我正在使用

react text mask

中的

MaskedInput

，当我最初将文本放入其中且元素未聚焦时，输入的文本正确显示，但是，当我关闭带有此组件的对话框窗口并重新打开时，出现了一些奇怪的行为，文本重叠在占位符文本上

看起来是这样的：

最初输入文本时：

以下是我对该组件的代码：

const SERIES_MASK = [/\d/, /\d/, " ", /\d/, /\d/];

const useStyles = makeStyles({
  inputLabel: {
   margin: "-8px 0 0 14px",
  },
});

const SeriesMask: FC<{}> = (props) => <MaskedInput {...props} mask={SERIES_MASK} />;

export const DocumentSeriesField: FC<{
   name: string;
   value: string;
   label: string;
   error?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
   }> = ({ name, value, label, error, onChange, onBlur }) => {
      const classes = useStyles();
      const id = useMemo(() => randomId("series"), []);

      return (
       <FormControl>
         <InputLabel htmlFor={id} error={Boolean(error)} classes={{ root: classes.inputLabel }}>
          {label}
         </InputLabel>
         <OutlinedInput id={id} name={name} value={value} label={label} inputComponent={SeriesMask} error={Boolean(error)} onChange={onChange} onBlur={onBlur} />
         <FormHelperText error={Boolean(error)}>{error}</FormHelperText>
       </FormControl>
    );
};

const SERIES_MASK=[/\d/，/\d/，“”，/\d/，/\d/]；
const useStyles=makeStyles({
输入标签：{
边距：“-8px 0 0 14px”，
},
});
常量序列任务：FC=（道具）=>；
导出常量文档系列字段：FC void；
onBlur：（e:React.FocusEvent）=>void；
}>=（{name，value，label，error，onChange，onBlur}）=>{
const classes=useStyles（）；
常量id=useMemo（（）=>randomId（“系列”），[]）；
返回(
{label}
{错误}
);
};

---

您能告诉我这里可能存在什么问题以及如何解决吗？

我认为您缺少MaskedInput中概述输入的参考

尝试将

inputRef

传递到

MaskedInput

，标签应该能够找到已填充的字段，并返回到边框，而不是重叠

系列任务

接口系列maskrefprops{
inputRef：（ref:HTMLInputElement | null）=>void；
} 
常量序列任务：FC=（props:InputBaseComponentProps）=>(
{
（props作为SeriesMaskRefProps）.inputRef（ref？ref.inputElement:null）；
}}//传递ref以允许输入标签与maaksed输入连接
掩码={SERIES_mask}
/>
);

使用样式是否正常工作？对话框打开后，

InputLabel

似乎没有任何样式reopened@UjinT34是的，我想是的。我刚刚从这个代码段中删除了useStyles对象，但它看起来是这样的：constUseStyles=makeStyles（{inputLabel:{margin:“-8px 0 0 14px”，}，}）；非常感谢。我在我的项目中应用了这些更改，并且成功了。