English 中文(简体)
React JS How to submit a form and THEN navigate to new page?
原标题:

I want to preface this by saying I am completely brand new to web development and am trying to add features to legacy code (and honestly I am not sure what the entire tech stack is)! Thank you for any insight you can provide.

I had this form that was originally like this:

render={fieldRenderProps => {
  const {
    rootClassName,
    className,
    formId,
    handleSubmit,
    inProgress,
    invalid,
    intl,
    img1,
    onOpenTermsOfService,
    values,
  } = fieldRenderProps;

...

  return (
    <Form className={classes} onSubmit={handleSubmit}>

I wanted to change it to not only submit and close the signup form but also then navigate to the about us page

So I changed it to this:

  const handleSubmit2 = async (event) => {
    event.preventDefault(); // Prevent the default form submission behavior
    await fieldRenderProps.handleSubmit(); // Wait for form submission to complete
    if (!props.inProgress) { // Check if inProgress state is finished
      history.push( /about ); // Use history.push to navigate without full page reload
    }
  };

...

  return (
    <Form className={classes} onSubmit={handleSubmit2}>

Originally with this form you would click continue and it would log you in: enter image description here

Now it goes to the new page, now with all the inputs of the form empty and the continue in the inprogress state. Finishes logging in and then closes on the new page.

How can I change the code so it finishes logging in/signing up and closes on the initial page with the form and THEN navigate to about us.

I don t know if this is relevant but in visual code if I highlight handlesubmit and go to definition it takes me to a file called index.d.ts and has this in it:

export interface FormRenderProps<
  FormValues = Record<string, any>,
  InitialFormValues = Partial<FormValues>,
> extends FormState<FormValues, InitialFormValues>,
    RenderableProps<FormRenderProps<FormValues>> {
  form: FormApi<FormValues>;
  handleSubmit: (
    event?: Partial<
      Pick<React.SyntheticEvent, "preventDefault" | "stopPropagation">
    >,
  ) => Promise<AnyObject | undefined> | undefined;
}

I am really having trouble deciphering this code and if it is even really the sign up "handleSubmit" or something else.

问题回答

暂无回答




相关问题
How to use one react app into another react app?

I have two react apps, parent app and child app. and child app have an hash router. I have build the child app using npm run build, It creates build folder. That build folder moved into inside the ...

how to get selected value in Ant Design

I want to print the selected value, and below is my option list: const vesselName = [ { value: 0 , label: ALBIDDA , }, { value: 1 , label: ALRUMEILA , }, { value: 2 ,...

How to add a <br> tag in reactjs between two strings?

I am using react. I want to add a line break <br> between strings No results and Please try another search term. . I have tried No results.<br>Please try another search term. but ...

热门标签