使用 formik 进行 ReactJS 材质 UI 表单验证答案

【问题标题】：ReactJS material UI form validation with formik使用 formik 进行 ReactJS 材质 UI 表单验证
【发布时间】：2019-10-26 17:31:09
【问题描述】：

我正在尝试使用 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 天并阅读完整的文档，但我还没有这样做。

如果有人能在这种情况下帮助我，将不胜感激？

【问题讨论】：

标签： reactjs redux material-ui formik

【解决方案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)} />

【讨论】：