Open yaofly2012 opened 4 years ago
Formik的validation分为两个部分:
onChange
and onBlur
by default;validateField
validateForm
validateForm
的含义容易让人误解。它是验证表单所有字段,但是验收失败并不会reject Promise
(下面的代码 是错误的用法)。
// 是错误的用法
form.validateForm().then(() => {
console.log(‘验证成功’)
}, () => {
console.log(‘验证失败’)
})
// 正确的用法
form.validateForm().then(() => {
console.log(‘验证完成’)
},)
它本质就是单纯的构建最新的errors
对象,并且validateForm
不会修改touches
对象(即此时及时字段有错误,错误信息也可能不会展示的)。
name
属性只能是字符串,所以采用lodash-like dot(bracket ) paths
命名name
的方式
这就涉及嵌套对象属性和name
的映射关系。initailValues
,values
,touches
,errors
这四个对象都必须是同构的。If we are okay with using the browser's built-in HTML input validation, you could add a required prop to each of our inputs, specify minimum/maximum lengths (maxlength and minlength), and/or add a pattern prop for regex validation for each of these inputs.
浏览器内置表单表单校验的存在的意义? ?
Yup
注意:
handleSubmit
(一般用于绑定form
标签上)或者submitForm
(一般用于命令式调用)才会进入【提交过程】。initialValues
的必要性?touched
?
看看这个I think solutions could be as followisValidating
isSubmitting
submitCount
Field
as
和component
属性区分?
Formik.tsx
formikReducer
useFormik
state
(Form State)由Filed的meta数据(getFieldMeta
)和Form的数据构成:
const [state, dispatch] = React.useReducer<
React.Reducer<FormikState<Values>, FormikMessage<Values>>
>(formikReducer, {
values: props.initialValues,
errors: props.initialErrors || emptyErrors,
touched: props.initialTouched || emptyTouched,
status: props.initialStatus,
isSubmitting: false,
isValidating: false,
submitCount: 0,
});
const initialValues = React.useRef(props.initialValues);
const initialErrors = React.useRef(props.initialErrors || emptyErrors);
const initialTouched = React.useRef(props.initialTouched || emptyTouched);
const initialStatus = React.useRef(props.initialStatus);
const isMounted = React.useRef<boolean>(false);
const fieldRegistry = React.useRef<FieldRegistry>({});
enableReinitialize
和initialValues
, initialErrors
, initialTouched
, initialStatus
关系:
在4个useEffect
里更新初始值。
统一的事件处理函数
Helper方法
react-fast-compare
深度比较
useFormik
const handleChange = React.useCallback(
(
eventOrPath: string | React.ChangeEvent<any>
)
参数是字符串的应用场景?
setIn/getIn: 通过路径方式set/get对象值
Formit组件
为啥需要FormikProvider
作为父组件?渲染子元素时并不涉及FormikProvider
ts:
Values extends FormikValues = FormikValues
useEventCallback
的用处?为啥要实现FieldArray
?
表单痛点
Formik
核心就是状态收集,除了
values
之外还有其他的相关状态:initialValues
initialValues
是必须的,用于初始化values
。values
errors
touches
并且它们都是同构的。
initialValues
的必要性?子组件如何访问Formik组件的状态和方法?
这就涉及如何使用Formik了。
Render props
方式;form方法:
注意:
handleChange
和handleBlur
的实参必须是SyntheticEvent
。但有些UI库中Input
的onChange
事件处理函数只是value
值,如果遇到这种情况可以利用Formik的方法显示的更新值。Formik只做逻辑,不做UI。
把逻辑和UI分开是很明智的,更容易扩展。 Formik只做逻辑部分。