Reactjs 如何使用react输入掩码（typescript）屏蔽formic中的材料ui输入

输入formik 文本字段的类型出错

        <InputMask
          mask="99/99/9999"
          value={formik.values.phone}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        >
          {(inputProps: Props): ReactElement => (
            <TextField
              {...inputProps}
              type="tel"
              label={t("addDriverModal.phone")}
            />
          )}
        </InputMask>

{（inputProps:Props）：ReactElement=>(
)}

---

不起作用。Props-来自@types/react输入掩码的类型声明

我不确定它在TypeScript中是如何工作的，但您可以这样做

/*像这样创建遮罩组件*/
常量phoneMaskComponent=arg=>{
const{inputRef，…other}=arg；
常数digitRegExp=/[0-9٠-٩-۰]/；
返回(
{
inputRef（ref？ref.inputElement:null）；
}}
guide={false}
掩码={strNumber=>{
返回strNumber.split（“”）.map（（）=>{
返回digitRegExp；
});
}}
管道={str=>{
const newStr=str
.替换（/[g，d=>d.charCodeAt（0）-1632）
.替换（/[g，d=>d.charCodeAt（0）-1776）
.替换（/[^0-9]+//g'）；
返回{
价值：newStr，
PipedChars的索引：范围（newStr.length*2），
};
}}
{…其他}
/>
);
};
/*在输入组件中设置掩码*/

我就是这样做的，它对我很有用：

const MYInput = ({...props}) => (
    <Field
        name={props.name}
        render={({field}) => {
          return (
            <InputMask
              {...field}
              mask={props.mask}
              > 
                {(innerProps) => (
                    <TextField
                      {...innerProps}
                      variant={props.variant ? props.variant : 'filled'}
                      label={props.label ? props.label : ''}
                      />

                )}
              </InputMask>

          )
        }}
      />


);

<MYInput name="Phone" label="Phone" mask="(99) 99999-9999" />

constmyinput=（{…props}）=>(
{
返回(
{（innerProps）=>(
)}
)
}}
/>
);

从“@material ui/core”导入{TextField，TextFieldProps}；
从“react input mask”导入InputMask，{Props}；
{/*
提供给TextField的“道具”与所需类型不匹配。
因此，我们使用“&”运算符，它用于相交两种类型
*/} 
{（inputProps:Props和TextFieldProps）=>
}