我想在我的React应用中使用Formik。
我已经使用了react-bootstrap，并且正在尝试如何将表单组件与Bootstrap样式结合使用。
我的表单如下：
// Render Prop
import React from 'react';
import { Link } from 'react-router-dom';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { Badge, Button, Col, Feedback, FormControl, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
import * as Yup from 'yup';
const style1 = {
width: '60%',
margin: 'auto'
}
const style2 = {
paddingTop: '2em',
}
const style3 = {
marginRight: '2em'
}
class Basic extends React.Component {
render() {
return (
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
role: '',
password: '',
confirmPassword: '',
consent: false
}}
validationSchema={Yup.object().shape({
firstName: Yup.string()
.required('First Name is required'),
lastName: Yup.string()
.required('Last Name is required'),
email: Yup.string()
.email('Email is invalid')
.required('Email is required'),
role: Yup.string()
.required('It will help us get started if we know a little about your background'),
password: Yup.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required'),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
.required('Confirm Password is required')
})}
onSubmit={fields => {
alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 4))
}}
render={({ errors, status, touched }) => (
<Form style={style1}>
<h1 style={style2}>Get Started</h1>
<div className="form-group">
<label htmlFor="firstName">First Name</label>
<Field name="firstName" type="text" className={'form-control' + (errors.firstName && touched.firstName ? ' is-invalid' : '')} />
<ErrorMessage name="firstName" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" type="text" className={'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '')} />
<ErrorMessage name="lastName" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<Field name="email" type="text" placeholder="Please use your work email address" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
<ErrorMessage name="email" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label htmlFor="role">Which role best describes yours?</label>
<Field name="role" type="text" placeholder="eg, academic, industry R&D, policy, funder" className={'form-control' + (errors.role && touched.role ? ' is-invalid' : '')} >
</Field>
<ErrorMessage name="role" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
<ErrorMessage name="password" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label htmlFor="confirmPassword">Confirm Password</label>
<Field name="confirmPassword" type="password" className={'form-control' + (errors.confirmPassword && touched.confirmPassword ? ' is-invalid' : '')} />
<ErrorMessage name="confirmPassword" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<Field component="select" name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</Field>
<Field name="consent" label="You must accept the and Privacy Policy" type="checkbox" className={'form-control' + (errors.consent && touched.consent ? ' is-invalid' : '')} />
<ErrorMessage name="consent" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<Button variant="outline-primary" type="submit" style={style3}>Register</Button>
</div>
</Form>
)}
/>
)
}
}
export default Basic;
当我尝试在render方法内添加一个react-bootstrap表单组到里面时，例如：
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
我收到了一个错误，错误信息如下：
元素类型无效：预期是字符串（用于内置组件）或类/函数（用于复合组件），但得到的是undefined。您可能忘记从定义组件的文件中导出该组件，或者混淆了默认和命名导入。
请检查
Formik 的渲染方法。我认为这个错误消息是指元素类型表示“电子邮件” - 但这没有任何意义，因为我的formik表单已经有了一个“电子邮件”类型，并且当我不使用react-bootstrap时就没有错误。
有人发现如何让Formik与react-bootstrap一起工作吗？