react - formik

代码地址

1.formik:简介

增强表单的处理能力，简单表单处理流程

官网：https://jaredpalmer.com/formik

下载：npm install formik --save

2.formik基本使用

使用formik进行表单数据绑定以及表单提交处理

import { useFormik } from 'formik'

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

export default App;

3.formik表单验证

2.2.1 初始验证方式

const formik = useFormik({
  validate: values => {
      const errors = {}
      if (!values.username) {
        errors.username = '请输入用户名'
      } else if (values.username.length > 15) {
        errors.username = '用户名的长度不能大于15'
      }
      if (values.password.length < 6) {
        errors.password = '密码的长度不能小于6'
      }
      return errors
    },
})

return <form>
<p>{formik.errors.username && formik.errors.username}</p>
<p>{formik.errors.password && formik.errors.password}</p>
</form>

2.2.2 formik表单验证(二)
解决没有初始值时，如果输入username，password的验证信息出现

1. 开启离开焦点时触发验证

onBlur={formik.handlerBlur}

2. 提示信息时检验表单元素的值是否被改动过

<p>{formik.touched.username && formik.errors.username ? formik.errors.username : null}</p>

2.2.3 表单验证
使用yup验证
npm install yup --save

定义验证规则

import * as Yup from 'yup'
validationSchema: Yup.object({
// 表单项。链式调用
  username: Yup.string() // .string:字符串类型
    .max(15, '用户名的长度不能大于15') // .max字符串的长度
    .required('请输入用户名'), // required: 必填
  password: Yup.string()
    .max(20, '密码的长度不能大于20')
    .required('请输入密码')
})

formik配合yup进行表单验证：

import * as Yup from 'yup'
function App() {
  const formik = useFormik({
    initialValues: { username: '', password: '' },
    validationSchema: Yup.object({
      username: Yup.string().max(15, '用户名的长度不能大于15').required('请输入用户名'),
      password: Yup.string().max(6, '密码的长度不能大于6').required('请输入密码')
    }),
    onSubmit: values => {
      console.log('values', values)
    }
  })
  return (
    <form onSubmit={formik.handleSubmit}>
      <input type="text" name="username" value={formik.values.username} onChange={formik.handleChange} />
      <p>{formik.errors.username && formik.errors.username}</p>
      <input type="password" name="password" value={formik.values.password} onChange={formik.handleChange} />
      <p>{formik.errors.password && formik.errors.password}</p>
      <input type="submit" />
    </form>
  )
}

export default App;

2.2.4 使用getFieldProps方法简化表单代码

{...formik.getFieldProps('username')}

getFieldProps中已经有value，onChange，onBlur属性

	<form onSubmit={formik.handleSubmit}>
      <input type="text" name="username" {...formik.getFieldProps('username')} />
      <p>{formik.errors.username && formik.errors.username}</p>
      <input type="password" name="password" {...formik.getFieldProps('password')}  />
      <p>{formik.errors.password && formik.errors.password}</p>
      <input type="submit" />
    </form>

2.2.5 使用组件的方式构建表单

可以让我们的代码看起来更简洁

import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

export default function App () {

  const initialValues = {
    username: '张三',
    content: '我是内容',
    subject: 'java',
  }
  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" />
        <button type="submit">提交</button>
      </Form>
    </Formik>
  )
}

2.2.6 构建其他的表单项

field组件as属性的用法
默认情况下，Field 组件渲染的是文本框，如要生成其他表单元素可以使用以下语法

<Field as="textarea" name="content" />
<Field as="select" name="subject" >
  <option value="java">java</option>
  <option value="js">js</option>
</Field>

2.2.7 使用useField 构建自定义表单控件

import {useField} from 'formik'
function MyinputField({label, ...props}) {
	const [filed, meta] = useField(props)
	console.log(field, meta, props)
	return <div>
    <label htmlFor={props.id}>{label}</label>
    <input {...field} {...props} />
    <span>{ meta.touched && meta.error ? meta.error: null }</span>
  </div>
<MyinputField label="密码" type="password" name="password" placeholder="请输入密码"/>

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

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>
}

<Checkbox value="足球" label="足球" name="hobbies" />
<Checkbox value="篮球" label="篮球" name="hobbies" />
<Checkbox value="橄榄球" label="橄榄球" name="hobbies" />

const initialValues = {
  hobbies: ['足球', '篮球']
}