Get null for innerRef of Formik

Question

当我尝试在 formik 上获取引用时，我在 ref 对象的当前字段中得到 null。

const formikRef = useRef();
...
<Formik
innerRef={formikRef}
initialValues={{
title: '',
}}
onSubmit={(values) => console.log('submit')}
>

接下来：

useEffect(() => {
console.log(formikRef);
}, []);

获取：

Object {
"current": Object {
"current": null,
},
}

如何解决此问题？ 请帮忙。

Answer 1

如果你想在 Formik 之外调用提交函数，你可以使用useImperativeHandle。公文

// Children Component
const Form = forwardRef((props, ref) => {
const formik = useFormik({
initialValues,
validationSchema,
onSubmit,
...rest // other props
})
useImperativeHandle(ref, () => ({
...formik
}))
return ** Your form here **
})

以及使用：

// Parent Component
const Parent = () => {
const formRef = useRef(null)
const handleSubmitForm = (values, actions) => { 
// handle logic submit form
}
const onSubmit = () => {
formRef.current.submitForm()
}
return (<>
<Form ref={formRef} onSubmit={handleSubmitForm} />
<button type="button" onClick={onSubmit}>Submit</button>
</>)
}

Answer 2

仅在 ref 有值时才读取它，并在 ref 上添加 useEffect 中的依赖关系。

useEffect(() => {
if (formikRef.current) {
console.log(formikRef);
}
}, [formikRef]);

请记住，引用处理它在 .current 属性中的实际值。

Answer 3

对我有用的是在useEffect的[]中添加变量。 就我而言，这是[ref.current, show].

在正文中的任何ref.current.setFieldValue之前添加一个if(ref.current) {...}useEffect或ref.current?.setFieldValue。

这花了我几个小时，我希望你过得更好。