个人创作formik material的表单字段基于react

最新推荐文章于 2023-08-07 22:48:12 发布

Future_object

最新推荐文章于 2023-08-07 22:48:12 发布

阅读量4.1k

点赞数

分类专栏： js react html5 文章标签： js react material

本文链接：https://blog.csdn.net/qq_39634880/article/details/85055167

版权

js 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

github地址

https://github.com/daixianceng/formik-material-fields

formik-material-fields

A set of material style fields for formik

formik-material-fields = formik + material-ui

This library provides the following components:

FormikTextField
FormikSelectField
FormikRadioGroupField
FormikCheckboxGroupField

Documentation

Installation

Using npm:

$ npm install --save formik-material-fields

Using yarn:

$ yarn add formik-material-fields

Usage

import React, { Component } from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { FormikTextField } from 'formik-material-fields';

const validationSchema = Yup.object().shape({
  username: Yup.string().required(),
});

const initialValues = {
  username: '',
};

class MyForm extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete="off">
            <FormikTextField
              name="username"
              label="Username"
              margin="normal"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}