Question

以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的类型声明

Answer 1

我不确定它在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数字。

Answer 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" />

Answer 3

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>

如何使用react-input-mask（Typescript）来掩盖甲酸中的材料ui输入

3 个答案: