在react-final-form
中,pristine
、submitting
和form.reset
是表单状态的一部分,通常在表单组件内部使用。如果你需要在表单外部访问这些状态或方法,可以通过将它们作为回调函数传递给父组件来实现。
react-final-form
的表单组件。useRef
钩子来保存对表单实例的引用,从而可以直接访问表单的状态和方法。以下是一个示例,展示了如何在父组件中访问这些状态和方法:
import React, { useRef } from 'react';
import { Form, Field } from 'react-final-form';
const MyForm = () => {
const formRef = useRef();
const handleReset = () => {
if (formRef.current) {
formRef.current.reset();
}
};
return (
<div>
<button onClick={handleReset}>Reset Form</button>
<Form
onSubmit={onSubmit}
initialValues={{ name: '', email: '' }}
render={({ handleSubmit, form, submitting, pristine }) => (
<form onSubmit={handleSubmit}>
<Field name="name">
{({ input }) => <input {...input} type="text" placeholder="Name" />}
</Field>
<Field name="email">
{({ input }) => <input {...input} type="email" placeholder="Email" />}
</Field>
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
</form>
)}
/>
</div>
);
};
export default MyForm;
formRef
,它将用于存储对表单实例的引用。formRef.current.reset()
来重置表单。render
属性中,我们传递了handleSubmit
, form
, submitting
, 和 pristine
给内部的表单组件。这样我们就可以在内部表单组件中使用这些状态和方法。useRef
时要注意,它只在组件渲染期间保持稳定,不会在组件重新渲染时重置。通过这种方式,你可以在react-final-form
中有效地管理和访问表单的状态和方法,即使在表单组件外部也是如此。
领取专属 10元无门槛券
手把手带您无忧上云