const {
value,
setValue,
setFieldValue
submit,
reset,
submitting,
initialValue,
handleChange,
handleSubmit,
handleReset,
checkValidity,
reportValidity,
nativeProps,
} = useForm(options)
// Example usage
const form = useForm({
initialValues: {
name: 'John Doe',
email: 'hi@john.doe',
},
onSubmit: (form) => {
console.log(form)
},
})
// form.nativeProps are used to pass down properties to the native form element
// form.submitting is used to check if the form is currently submitting
// form.submit() is used to submit the form
// form.reset() is used to reset the form
// form.setValue() is used to modify the entire form value
// form.setFieldValue() is used to set a single form field value
// form.checkValidity() validates the form's validity, underlyingly calling the native form's checkValidity method, only valid for native forms
// form.reportValidity() validates and reports the form's validity, underlyingly calling the native form's reportValidity method, only valid for native forms
// When using native form elements in uncontrolled mode, but internally controlling the form's ref
// An internal mechanism ensures that executing `setValue` and `setFieldValue` operations synchronizes with UI state
return (
<form {...form.nativeProps}>
<label>Name:<input type="text" name="name" /></label>
<label>Email:<input type="email" name="email" /></label>
<button disabled={form.submitting} type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
)
// When using a component library, controlled mode, e.g., shineout
return (
<Form
value={form.value}
onChange={form.onChange}
onSubmit={form.onSubmit}
onReset={form.onReset}
defaultValue={form.initialValue}
>
<Form.Item label="姓名"><Input type="text" name="name" /></Form.Item>
<Form.Item label="邮箱"><Input type="email" name="email" /></Form.Item>
<Form.Submit loading={form.submitting}>提交</Form.Submit>
<Form.Reset>重置</Form.Reset>
</Form>
)
