Howto set saveButtonProps.onClick correctly?

I am trying to overwrite the saveButtonProps.onClick function. However i cant quite get it:

  const reactHookFormMethods = useStepsForm<BaseRecord, HttpError, ExpenseStartupAPI>({
    refineCoreProps: {
      action: "edit",
      metaData: {
        populate: ["administration", "businessplan", "vermittlung","geschaeftsausstattung","weitereKosten"],
      },
    },   
  })
...

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  reactHookFormMethods.saveButtonProps.onClick = (e) => {
    console.log("saveButtonProps onclick is executed",e)
     handleSubmit((values) => {
        console.log("iam in hanldesubmit")
        const convertedDate = new Date(values.start).toJSON()
        values.start = convertedDate
        // @ts-ignore
        values.financialplan = 14
        console.log("🚀 ThIS DATA IS SENT TO BACKEND::::::::::::::::::: ~ file: edit.tsx:64 ~ handleSubmit ~ values", values)
        onFinish(values)
     })
  }

  const reactHookFormMethods = useStepsForm<BaseRecord, HttpError, ExpenseStartupAPI>({
    refineCoreProps: {
      action: "edit",
      metaData: {
        populate: ["administration", "businessplan", "vermittlung","geschaeftsausstattung","weitereKosten"],
      },
    },   
  })
...

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  reactHookFormMethods.saveButtonProps.onClick = (e) => {
    console.log("saveButtonProps onclick is executed",e)
     handleSubmit((values) => {
        console.log("iam in hanldesubmit")
        const convertedDate = new Date(values.start).toJSON()
        values.start = convertedDate
        // @ts-ignore
        values.financialplan = 14
        console.log("🚀 ThIS DATA IS SENT TO BACKEND::::::::::::::::::: ~ file: edit.tsx:64 ~ handleSubmit ~ values", values)
        onFinish(values)
     })
  }

Inside another Component:

...
      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
      />

...
      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
      />

The first console.log gets fired console.log("saveButtonProps onclick is executed",e) However the second one is not reached Can someone help thank you

4 Replies

Omer•2y ago

Hey @zomh , Can you check this doc? https://refine.dev/docs/packages/documentation/react-hook-form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

useForm | refine

The @pankod/refine-react-hook-form adapter allows you to integrate the React Hook Form library with refine, enabling you to manage your forms in a headless manner. This adapter supports all of the features of both React Hook Form and refine's useForm hook, and you can use any of the React Hook Form examples as-is by copying and pasting them into...

sensitive-blue•2y ago

thanks @Omer

Omer•2y ago

Did it help you? 👀

sensitive-blue•2y ago

yes thank you @Omer its working, i did overwrite saveButton like this:

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  const onFinishHandler = (values: ExpenseStartupAPI) => {
    const convertedDate = new Date(values.start).toJSON()
    values.start = convertedDate
    // @ts-ignore
    values.financialplan = 14
    
    onFinish(values);
};

  reactHookFormMethods.saveButtonProps.onClick = handleSubmit(onFinishHandler)

  const {handleSubmit, refineCore:{onFinish}} = reactHookFormMethods

  const onFinishHandler = (values: ExpenseStartupAPI) => {
    const convertedDate = new Date(values.start).toJSON()
    values.start = convertedDate
    // @ts-ignore
    values.financialplan = 14
    
    onFinish(values);
};

  reactHookFormMethods.saveButtonProps.onClick = handleSubmit(onFinishHandler)

and then in another component

      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
       />

      <Edit
         isLoading={formLoading}
         saveButtonProps={saveButtonProps}
         ...
       />