我无法理解如何将formik
与react-native
一起使用。 formik文档中指定的唯一示例是Formik
组件,该组件返回formik的上下文。但是,我想像本教程中建议的那样将其与<Form>
,<Field>
和<ErrorMessage>
组件一起使用。当我从教程中复制代码时:
const SignupForm = () => {
return (
<Formik
initialValues={{ firstName: '', lastName: '', email: '' }}
validationSchema={Yup.object({
firstName: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
lastName: Yup.string()
.max(20, 'Must be 20 characters or less')
.required('Required'),
email: Yup.string()
.email('Invalid email address')
.required('Required'),
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
<Form>
<Text htmlFor="firstName">First Name</Text>
<Field name="firstName" type="text" />
<ErrorMessage name="firstName" />
<Text htmlFor="lastName">Last Name</Text>
<Field name="lastName" type="text" />
<ErrorMessage name="lastName" />
<Text htmlFor="email">Email Address</Text>
<Field name="email" type="email" />
<ErrorMessage name="email" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
};
调用栈来自<Field>
组件,这些组件创建了<input>
组件,不适用于响应本机。
有人可以向我解释如何像减少样板提供的那样使用它吗?