React 表单 Formik 库使用

文章来自拉勾教育大前端高薪训练营

Formik用于增强表单处理能⼒. 简化表单处理流程
官网链接: https://jaredpalmer.com/formik/.

Formik 下载

npm install formik

Formik 基本使用

使用 Formik 的 useFormik 方法配置基本使用方法，方法调用返回 formik 对象，对象存储了表单的方法对对象；需要绑定表单，表单必须要有 name 属性，对应
initialValues 属性

import { useFormik } from 'formik'

function App() {
	const formik = useFormik({
		initialValues: {
			username: '张三',
		},
		onSubmit: values => {}
	})
	return <form onSubmit={formik.handleSubmit}>
		<input type="text" name="username"
		value={formik.values.username}
		onChange={formik.handleChange}/>
		<input type="submit"/>
	</form>
}

表单验证

在 useFormik 中配置 validate 添加验证逻辑；给表单添加离开焦点事件，使用 formik 的 touched 属性，表示表单发生更改，必须给表单添加 onBlur 事件

function App() {
	const formik = useFormik({
		initialValues: {
			username: '张三',
		},
		validate: values => {
			const errors = {};
			if(!values.username) errors.username = "请输入用户名";
			return errors;
		},
		onSubmit: values => {}
	})
	return <form onSubmit={formik.handleSubmit}>
		<input type="text" name="username"
		value={formik.values.username}
		onChange={formik.handleChange}
		onBlur={formik.handleBlur}
		/>
		{formik.touched.username && ? formik.errors.username ? <div>formik.errors.username</div> : null}
		<input type="submit"/>
	</form>
}

使用 Yup 进行表单验证

下载yup

npm install yup

在使用 yup 验证表单时，不需要配置 validate ，需要 validationSchema 配置 Yup.object 创建验证规则，属性是具体表单名字，可以进行链式调用

function App() {
	const formik = useFormik({
		initialValues: {
			username: '张三',
		},
		validationSchema: {
			username: Yup.string()
				.max(15, "用户名长度不能大于15")
				.required('请输入用户名')
		},
		onSubmit: values => {}
	})
	return <form onSubmit={formik.handleSubmit}>
		<input type="text" name="username"
		value={formik.values.username}
		onChange={formik.handleChange}
		onBlur={formik.handleBlur}
		/>
		{formik.touched.username && ? formik.errors.username ? <div>formik.errors.username</div> : null}
		<input type="submit"/>
	</form>
}

使用 getFieldProps 简化代码，getFieldProps 传入表单名字，返回对象，对象内置value，onChange，onBlur属性

return <form onSubmit={formik.handleSubmit}>
		<input type="text" name="username"
		{ ...formik.getFieldProps("username") }
		/>
		{formik.touched.username && ? formik.errors.username ? <div>formik.errors.username</div> : null}
		<input type="submit"/>
	</form>

组件方式构建表单

使用组件方式构建表单，代码结构更加清晰，Field 默认表单 type 属性值是"text"，通过 as 可以定义不同类型表单

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

function App(){
	const initalValues = { username:'', content: '' };
	const handleSubmit = values => {
		console.log(values)
	};
	const schema = {
		username: Yup.string()
				.max(15, "用户名长度不能大于15")
				.required('请输入用户名')
	}
	return (
		<Formik
			initialVaues={initialVaues}
			onSubmit={handleSubmit}
			validationSchema={schema}
		>
			<Form>
				<Field name="username"/>
				<ErrorMessage name="username"/>
				<Field as="textarea" name="content"/>
			</From>
		</Formik>
	)
}

自定义表单控件构建复选框

自定义表单控件就是组件，通过解构传入信息构建表单，单独结构 label ，因为其他属性为表单属性，放入 props对象中，节省代码

import React from "react";
import { Formik, Form, Field, ErrorMessage, useField } from "formik";
import * as Yup from "yup";

function Checkbox ({label, ...props}) {
  const [field, meta, helper] = useField(props);
  const { value } = meta;
  const { setValue } = helper;
  const handleChange = () => {
    const set = new Set(value);
    if (set.has(props.value)) {
      set.delete(props.value);
    }else {
      set.add(props.value);
    }
    setValue([...set])
  }
  return <div>
    <label htmlFor="">
      <input checked={value.includes(props.value)} type="checkbox" {...props} onChange={handleChange}/> {label}
    </label>
  </div>
}

function App() {
  const initialValues = {username: '', hobbies: ['足球', '篮球']};
  const handleSubmit = (values) => {
    console.log(values);
  };
  const schema = Yup.object({
    username: Yup.string()
      .max(15, "用户名的长度不能大于15")
      .required("请输入用户名"),
  });
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={handleSubmit}
      validationSchema={schema}
    >
      <Form>
        <Field name="username" />
        <ErrorMessage name="username" />
        <Checkbox value="足球" label="足球" name="hobbies"/>
        <Checkbox value="篮球" label="篮球" name="hobbies"/>
        <Checkbox value="橄榄球" label="橄榄球" name="hobbies"/>
        <input type="submit"/>
      </Form>
    </Formik>
  );
}

export default App;