企业建立网站账户如何做,步骤拼音,爱站网关键词长尾挖掘,建筑学院网站Formik 是 React 和 React Native 开源表单库#xff0c;Formik 负责处理重复且烦人的事情——跟踪值/错误/访问的字段、编排验证和处理提交——所以您不必这样做。而简化字段校验的话我们可以使用yup工具来实现。
首先安装Formik 和 Yup
npm i formik
npm i yupFormik 与 R…Formik 是 React 和 React Native 开源表单库Formik 负责处理重复且烦人的事情——跟踪值/错误/访问的字段、编排验证和处理提交——所以您不必这样做。而简化字段校验的话我们可以使用yup工具来实现。
首先安装Formik 和 Yup
npm i formik
npm i yupFormik 与 React Native 简单实例
首先我们先实现一个简单的实例体验一下Formik框架的使用过程。
export default function FormikCheck() {return (View style{styles.container}Text style{styles.mainTitle}表单校验/TextFormikinitialValues{{ email: }}onSubmit{(values) console.log(values)}{/* 渲染属性 */}{({ handleChange, handleBlur, handleSubmit, values }) (ViewTextInputstyle{styles.inputItem}onChangeText{handleChange(email)}onBlur{handleBlur(email)}value{values.email}/Button onPress{() handleSubmit()} title提交表单 //View)}/Formik/View);
}const styles StyleSheet.create({container: {flex: 1,padding: 10,},mainTitle: {fontSize: 20,paddingBottom: 10,borderBottomWidth: 1,borderBottomColor: #e3e3e3,marginBottom: 10,},inputItem: {padding: 10,borderBottomWidth: 1,borderBottomColor: #e3e3e3,marginBottom: 10,},
});Formik 常用属性和方法说明
通过上述的例子可以看到我们使用的是Formik框架中的Formik组件来包裹表单元素从而进行表单的是有相关操作。
Formik组件每个渲染方法常用的属性有如下几个
属性类型说明errors{ [field: string]: string }表单错误信息所有表单对应的字段校验错误信息都在这个对象中handleReset() void重置处理程序。将表单重置为其初始状态handleSubmit(e: React.FormEvent) void提交处理程序
Formik组件常用的方法和属性有如下几个
方法 / 属性参数说明initialValuesValues表单的初始字段值validationSchemaSchema 或者 (() Schema)Yup 模式或返回 Yup 模式的函数。这用于验证。错误通过键映射到内部组件的错误。它的键应该与值的键匹配。onReset(values: Values, formikBag: FormikBag) void表单重置处理程序onSubmit(values: Values, formikBag: FormikBag) void Promise表单提交处理程序
Formik 与 yup 一起使用进行表单校验
Formik框架只是为我们简化表单的操作当出现表单字段特别多的时候我们一个一个字段进行表单字段值的校验这很麻烦所以我们可以使用yup工具来帮我们简化校验流程。具体实例如下
const userSchema Yup.object().shape({email: Yup.string().email(Invalid email address),
});export default function FormikCheck() {return (View style{styles.container}Text style{styles.mainTitle}表单校验/TextFormikinitialValues{{ email: }}onSubmit{(values) console.log(values)}validationSchema{userSchema}{/* 渲染参数 */}{({handleChange,errors,handleSubmit,values,dirty,handleReset,}) (ViewTextInputstyle{styles.inputItem}onChangeText{handleChange(email)}value{values.email}/{errors.email ? Text{errors.email}/Text : }ButtononPress{() {console.log(dirty);handleSubmit();}}title提交表单/Button onPress{() handleReset()} title重置 //View)}/Formik/View);
}
