以下内容总结自Formik的官方文档, 所以你会看到一些原文引用(当然是我过滤后的)
Overview
Formik 总的来说帮助我们做下面3件事
- Getting values in and out of form state
- Validation and error messages
- Handling form submission
Why not Redux-Form?
总的来说, redux form提供的东西太重了, 过多的reducer, 而且通常情况下我的Form值并不需要保存在redux的state中
My goal with Formik was to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff and leaves the rest up to you.
Formik 使用以下3个event handlers
handleChange, handleBlur, and handleSubmit
handleChange and handleBlur work exactly as expected–they use a name or id attribute to figure out which field to update.
也就是说Formik需要使用name或者是id来确认是哪个field被change了
以下两种方式使用Formik都是可以的
There are two ways to use Formik:
withFormik()
: A Higher-order Component (HoC) that accepts a configuration object<Formik />
: A React component with arender
prop
正常来说你可以使用下面这些常用属性
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
如果你向我一样, 想传入一些自定义的变量, 你可要看仔细了
自定义的form应该是这样的
import React from "react";
import Alert from "./Alert";
const PlayerForm = ({
values,
handleSubmit,
iWantTransferthisValue
}) => {
console.log("here:")
console.log(iWantTransferthisValue)
return (
<form className="form" onSubmit={handleSubmit}>
{iWantTransferthisValue}
</form>
);
};
export default PlayerForm;
下面是对上面form的调用
const EditPlayerForm = props => <PlayerForm {...props} isNewPlayer={false} iWantTransferthisValue={props.wantedValue}/>;
<Formik onSubmit={onSubmit} initialValues={player} iWantTransferthisValue="testValue">
{x => <EditPlayerForm {...x} iWantTransferthisValue={'great!'} /> }
</Formik>
submit方法接收两个参
第一个是values, 保存form的值, 第二个参数是扩展参数, 这里用结构拆开, 包含了一些回调函数
const onSubmit = async (values, { props, setSubmitting, setErrors }) => {
await api.edit(values).then(
values => {
console.log(values),
setSubmitting(false),
history.push("/players")
},
error => {
setSubmitting(false);
setErrors({ general: error.message });
});
};
如果使用Field 标签, 还可以写的更简单一些, 下面的input标签和Field标签等价
<input
type="text"
name="social.facebook"
onChange={handleChange}
onBlur={handleBlur}
value={values.social.facebook}
/>
<Form>
<Field type="email" name="email" />
</Form>
如果需要给form中的fileds赋初始值
<Formik
initialValues={{ name: 'jared' }}
</Formik>