Refine•3y ago

Howto set saveButtonProps.onClick correctly?

I am trying to overwrite the

saveButtonProps.onClick

saveButtonProps.onClick

saveButtonProps.onClick

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)
     })
  }

  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}
         ...
      />

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

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

The first console.log gets fired

console.log("saveButtonProps onclick is executed",e)

console.log("saveButtonProps onclick is executed",e)

console.log("saveButtonProps onclick is executed",e)

console.log("saveButtonProps onclick is executed",e)
However the second one is not reached

Can someone help thank you

Omer•1/17/23, 4:00 PM

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...

rubber-blueOP•1/17/23, 4:31 PM

thanks @Omer

Omer•1/17/23, 7:52 PM

Did it help you?

rubber-blueOP•1/18/23, 10:01 AM

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}
         ...
       />