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