Skip to content

createFormControl

创建表单状态并准备订阅

此函数创建整个表单状态订阅，并允许你订阅有或没有反应组件的更新。你无需 React Context api 即可使用此功能。

¥This function create the entire form state subscription and allow you to subscribe update with or without react component. You can use this function without the need of React Context api.

属性

¥Props

名称类型描述
...propsObjectUseFormProps

返回

¥Returns

名称类型描述
formControlObjectuseForm 钩子的控制对象
controlObjectuseController、useFormState、useWatch 的控制对象
...returnsFunctionsuseForm 返回方法
NOTES

  • 此功能在 v7.55.0 上发布 - 此功能完全是可选的，你可以考虑使用它来代替 useFormContext API。* 如果你想通过跳过 React 重新渲染来订阅 formsState，你可能会发现它很有用。

    ¥This function is published at v7.55.0 - This function is completely optional, you can consider to use this instead of useFormContext API. - You may find it useful if you would like to subscribe formsState by skipping react re-render.

RULES

  • 你应该使用此 API 或上下文 API

    ¥You should either use this API or context API

const props = createFormControl()


<FormProvider {...props} /> // ❌ You don't need provider


<input {...props.register('name')} /> // ✅ Direct use method from createFormControl

示例：

¥Examples:

const { formControl, control, handleSubmit, register } = createFormControl({
  mode: 'onChange',
  defaultValues: {
    firstName: 'Bill'
  }
}})


function App() {
  useForm({
    formControl,
  })


  return (
    <form onSubmit={handleSubmit(data => console.log)}>
      <input {...register('name')} />
      <FormState />
      <Controller />
    </form>
  );
}


function FormState() {
  useFormState({
    control // no longer need context api
  })
}


function Controller() {
  useFormState({
    control // no longer need context api
  })
}
const { formControl, register } = createFormControl(props)


formControl.subscribe({
  formState: {
    isDirty: true,
    values: true,
  },
  callback: (formState) => {
    if (formState.isDirty) {
      // do something here
    }


    if (formState.values.test.length > 3) {
      // do something here
    }
  },
})


function App() {
  const { register } = useForm({
    formControl,
  })


  return (
    <form>
      <input {...register("test")} />
    </form>
  )
}