FormikRadioGroupField.md

FormikRadioGroupField

道具 API

名字	类型	默认	描述
FormControlLabelProps	object		附加到 @material-ui/core/FormControlLabel 上的道具
FormHelperTextProps	object		附加到 @material-ui/core/FormHelperText 上的道具
FormLabelProps	object		附加到 @material-ui/core/FormLabel 上的道具
name	string		字段的名字，见formik文档 field#name
options	array		radio列表，每一项是一个形如{ label: 'Male', value: 'male' }的对象，value必须唯一，且只能为string
RadioGroupProps	object		附加到 @material-ui/core/RadioGroup 上的道具
RadioProps	object		附加到 @material-ui/core/Radio 上的道具
row	true 或 false 或 'all'	false	是否使用行布局，如果是'all'则所有元素都排列成一行
validate	func		验证函数，见formik文档 field#validate

其它道具将会传递到 @material-ui/core/FormControl 组件

例子

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

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

const initialValues = {
  gender: '',
  country: '0',
};

class MyForm extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete="off">
            <FormikRadioGroupField
              name="gender"
              label="Gender"
              margin="normal"
              options={[
                { label: 'Male', value: 'male' },
                { label: 'Female', value: 'female' },
              ]}
            />
            <FormikRadioGroupField
              name="country"
              label="Country"
              margin="normal"
              options={[
                { label: 'China', value: '0' },
                { label: 'United States', value: '1' },
              ]}
              row
              fullWidth
            />
            <FormikRadioGroupField
              name="country"
              label="Country"
              margin="normal"
              options={[
                { label: 'China', value: '0' },
                { label: 'United States', value: '1' },
              ]}
              row="all"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}