ReactJS 材料 UI 表單驗證與 formik

Question

我正在嘗試使用reactjs material ui和formik實現驗證電話號碼字段

我閱讀了關於它的大量文章，但我無法以我的方式實現這一點。

我在這里提交我的組件的可復制代碼：

import React from 'react';
import TextField from '@material-ui/core/TextField';

import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';

import {
  Formik, Form, Field, ErrorMessage,
} from 'formik';
import * as Yup from 'yup';


function App(props) {

  const [values, setValues] = React.useState({
    phone: '',
  });


  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };


  const validationSchema = Yup.object({
    phone: Yup.string("")
      .min(11, "phone must contain atleast 11 characters")
      .required("Enter your phone"),
  });



  return (

    <React.Fragment>

      <FormGroup autoComplete="on">
        <TextField
          id=""
          label="Phone"
          value={values.phone}
          onChange={handleChange('phone')}
          type="number"
          name='phone'
        />
      </FormGroup>

    </React.Fragment>

  );
}


export default connect(null)(App);

誰能幫我實現驗證？ 我正在嘗試過去 6 天並閱讀完整的文檔，但我還沒有做到。

如果有人可以在這種情況下幫助我，將不勝感激？

Answer 1

請使用“material-ui-phone-number”。 它將通過掩碼驗證輸入。 你不必弄臟你的手。 但是您可能需要清理來自 Formik 的電話號碼值返回。

import MuiPhoneNumber from 'material-ui-phone-number'

<Field
  name="phoneNumber"
  label={t('Phone Number')}
  component={MuiPhoneNumber}
  variant="outlined"
  defaultCountry="mm"
  fullWidth
  onChange={v => setFieldValue('phoneNumber', v)}
  helperText={touched.phoneNumber ? t(errors.phoneNumber) : ''}
  error={touched.phoneNumber && Boolean(errors.phoneNumber)} />