以formik输入 TextField类型错误
<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>
不起作用。道具-来自@ types / react-input-mask的类型声明
我不确定它在TypeScript中如何工作，但是您可以这样做。
/* Create Your Mask Component Like This */
const phoneMaskComponent = arg => {
const { inputRef,...other } = arg;
const digitRegExp = /[0-9٠-٩۰-۹]/;
return (
<MaskedInput
ref={ref => {
inputRef(ref ? ref.inputElement : null);
}}
guide={false}
mask={strNumber => {
return strNumber.split('').map(() => {
return digitRegExp;
});
}}
pipe={str => {
const newStr = str
.replace(/[٠١٢٣٤٥٦٧٨٩]/g,d => d.charCodeAt(0) - 1632)
.replace(/[۰۱۲۳۴۵۶۷۸۹]/g,d => d.charCodeAt(0) - 1776)
.replace(/[^0-9]+/g,'');
return {
value: newStr,indexesOfPipedChars: range(newStr.length * 2),};
}}
{...other}
/>
);
};
/* Set The Mask in Your Input Component */
<InputBase
fullWidth
isLtr
name="phone"
label="Enter Phone Number"
type="tel"
value={formik.values.phone}
/* Use The Mask like This */
inputComponent={phoneMaskComponent}
/>
此面罩不允许用户输入En数字。
,我这样做了，对我有用：
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" />
import { TextField,TextFieldProps } from "@material-ui/core";
import InputMask,{Props} from 'react-input-mask';
<InputMask
mask="99/99/9999"
value={formik.values.phone}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
>
{/*
'props' supplied to TextField weren't matching the required type.
Hence we use '&' operator which is for intersecting two types
*/}
{(inputProps: Props & TextFieldProps)=>
<TextField
{...inputProps}
type="tel"
label={t("addDriverModal.phone")}
/>
}
</InputMask>