无法在React.js中使用formik创建单选按钮验证及其实现

时间:2020-03-18 18:00:10

标签: reactjs radio-button formik

import React, { Component } from 'react';
import { Row, Col, FormGroup, Label, Input } from 'reactstrap';
import { Formik, Form, ErrorMessage} from 'formik';
import * as Yup from 'yup';


export class A extends Component {

    render() {
        return (
            <Formik
                initialValues={{
                    gender: ''
                }}
                validationSchema={Yup.object().shape({
                    gender: Yup.string().required("Please select gender")

                })}
                onSubmit={(fields) => {
                    console.log(fields.gender);

                }
                    render={({ }) =>
                    <Row>
                        <Form>
                            <Row>

                                <Col>

                                    <div>
                                        <label htmlFor="gender">Gender</label>
                                        <FormGroup tag="fieldset" name="gender">
                                            <FormGroup check>
                                                <Label check><Input type="radio" name="gender" />Male</Label>
                                            </FormGroup>
                                            <FormGroup check>
                                                <Label check><Input type="radio" name="gender" />Female</Label>
                                            </FormGroup>
                                        </FormGroup>
                                        <ErrorMessage
                                            name="gender"
                                            component="div"
                                            className="invalid-feedback"
                                        />
                                    </div>
                                </Col>
                            </Row>
                        </Form>
                    </Row>
                    />
                    )}

    export default A;
  1. 我的要求是使用使用Formik的单选按钮选择性别(男性或女性)
  2. 如果我未选择任何广播选项,则应使用消息“请选择性别”进行验证
  3. 最后,当我们尝试在OnSubmit()方法中提交.i.e时,我不会获得单选选项的选定值(即,男性或女性)
  4. 我尝试过但无法使用Formik实现单选按钮。请帮忙吗?

0 个答案:

没有答案