Fomik

Fomik

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

npm install formik

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

import { useFormik } from 'formik';
function App() {
  const formik = useFormik({
    initialValues: { username: '张三', password: '123456'},
    onSubmit: (values) => {
    console.log(values)
  }})
  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;

表单验证

import { useFormik } from 'formik';
function App() {
  const formik = useFormik({
    initialValues: { username: '', password: ''},
    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;
    },
    onSubmit: (values) => {
    console.log(values)
  }})
  return (
  <form onSubmit={formik.handleSubmit}>
    <input type="text"
     name="username"
     value={formik.values.username}
     onChange={formik.handleChange}
     onBlur={formik.handleBlur}/>
     <p>{ formik.touched.username &&formik.errors.username ? formik.errors.username : null}</p>
    <input type="password"
     name="password"
     value={formik.values.password}
     onChange={formik.handleChange}
     onBlur={formik.handleBlur}/>
     <p>{ formik.touched.password &&formik.errors.password ? formik.errors.password : null}</p>
    <input type="submit"/>
  </form>
  );
}

export default App;

Yup

使用yup验证

npm install yup

使用validationSchema

  validationSchema: Yup.object({
      username: Yup.string()
      .max(15, '用户名的长度不能大于15')
      .required('请填写用户名'),
      password: Yup.string()
      .min(6, '密码的长度不能小于6')
      .required('请填写密码')
    }),

减少样板代码

• getFieldProps

  <input type="text"
     name="username"
     { ...formik.getFieldProps('username') }/>

使用组件的方式构建表单

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

function App() {
  const initialValues = {username: ''};
  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"/>
      <input type="submit"/>
    </Form>
  </Formik>);
}

export default App;

构建其他表单项

• 默认情况下，Field组件渲染的事文本框，如要生成其他表单元素可以使用一下语法

    <Field as="textarea" name="content" />
    <Field as="select" name="subject">
      <option value="前端">前端</option>
      <option value="java">Java</option>
     </Field>
  

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

function MyInput ({label, ...props}) {
 const [field, meta] = useField(props)
 console.log(field)
 console.log(meta)
 return <div>
   <label htmlFor={props.id}>{label}</label>
 <input {...field} {...props}/>
 { meta.touched && meta.error ? <span>{ meta.error }</span> : null}
 </div>
}

自定义checkbox

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