資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時裝設計
法律使用 Formik 處理 React.js 中的表單
Formik 的目的是消除 react 中表單處理的複雜性，簡化表單提交。
Formik 使用 yup 來驗證表單域，使用起來非常簡單
首先安裝 formik 庫
npm install –save formic
示例
import React, { Component} from 'react';
import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik';
export class FormExample extends Component {
handleSubmit = (values, {
props = this.props,
setSubmitting
}) => {
setSubmitting(false);
return;
}
render() {
return(
<Formik
initialValues={{
first_name: '',
last_name: ''
}}
validate={(values) => {
let errors = {};
if(!values.first_name)
errors.first_name = "first name Required";
//check if my values have errors
return errors;
}
}
onSubmit={this.handleSubmit}
render={formProps => {
return(
<Form>
<Field type="text" name="first_name" placeholder="First Name"/>
<ErrorMessage name="first_name" />
<Field type="text" name="last_name" placeholder="Last Name" />
<ErrorMessage name="last_name" />
<button type="submit" disabled={formProps.isSubmitting}>
Submit Form
</button>
</Form>
);
}}
/>);
}
}程式碼不言自明。我們有兩個欄位 first_name 和 last_name。我們驗證 first_name 欄位，如果為空則顯示錯誤訊息。
請注意從 formik 匯入的元件→Formik、FormikProps、Form、Field、ErrorMessage
我們可以使用與 formik 庫配合良好的 yup
const validationSchema = Yup.object({
first_name: Yup.string("Enter a First Name")
.required("First Name is required"),
last_name: Yup.string("Enter your Last Name")
.last_name("Enter a valid Last Name")
.required("Last Name is required")
})我們可以使用以上方式使用 yup 進行驗證，並將驗證模式新增到 formik 元件上以使其生效。
<Formik
initialValues={values}
validationSchema={validationSchema}
/>
更新於：2019 年 9 月 4 日
301 次瀏覽
廣告