Javascript 发布到其他页面后重定向

我正在制作一个react编码模板，在点击submit后，它会向我显示一条成功的消息并停留在同一页面上。我想添加一个重定向到提交按钮，如果没有改变设计成功。My./AskPage组件使用来自./Form的接口。单击submit后，如何将重定向添加到./AskPage？下面是我的代码

/表格编号为：

import { FC, useState, createContext, FormEvent } from 'react';
import { PrimaryButton, gray5, gray6 } from './Styles';
/** @jsx jsx */
import { css, jsx } from '@emotion/core';

export interface Values {
  [key: string]: any;
}

export interface Errors {
  [key: string]: string[];
}

export interface Touched {
  [key: string]: boolean;
}
/* export interface onSubmit {
  [key: string]: any
} */

interface FormContextProps {
  values: Values;
  setValue?: (fieldName: string, value: any) => void;
  errors: Errors;
  validate?: (fieldName: string) => void;
  touched: Touched;
  setTouched?: (fieldName: string) => void;
}
export const FormContext = createContext<FormContextProps>({
  values: {},
  errors: {},
  touched: {},
});

type Validator = (value: any, args?: any) => string;

export const required: Validator = (value: any): string =>
  value === undefined || value === null || value === ''
    ? 'This must be populated'
    : '';

export const minLength: Validator = (value: any, length: number): string =>
  value && value.length < length
    ? `This must be at least ${length} characters`
    : '';

interface Validation {
  validator: Validator;
  arg?: any;
}

interface ValidationProp {
  [key: string]: Validation | Validation[];
}

export interface SubmitResult {
  success: boolean;
  errors?: Errors;
}

interface Props {
  submitCaption?: string;
  validationRules?: ValidationProp;
  onSubmit: (values: Values) => Promise<SubmitResult>;
  successMessage?: string;
  failureMessage?: string;
}
export const Form: FC<Props> = ({
  submitCaption,
  children,
  validationRules,
  onSubmit,
  successMessage = 'Success!',
  failureMessage = 'Something went wrong',
}) => {
  const [values, setValues] = useState<Values>({});
  const [errors, setErrors] = useState<Errors>({});
  const [touched, setTouched] = useState<Touched>({});
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [submitError, setSubmitError] = useState(false);

  const validate = (fieldName: string): string[] => {
    if (!validationRules) {
      return [];
    }
    if (!validationRules[fieldName]) {
      return [];
    }
    const rules = Array.isArray(validationRules[fieldName])
      ? (validationRules[fieldName] as Validation[])
      : ([validationRules[fieldName]] as Validation[]);
    const fieldErrors: string[] = [];
    rules.forEach(rule => {
      const error = rule.validator(values[fieldName], rule.arg);
      if (error) {
        fieldErrors.push(error);
      }
    });
    const newErrors = { ...errors, [fieldName]: fieldErrors };
    setErrors(newErrors);
    return fieldErrors;
  };

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (validateForm()) {
      setSubmitting(true);
      setSubmitError(false);
      const result = await onSubmit(values);
      setErrors(result.errors || {});
      setSubmitError(!result.success);
      setSubmitting(false);
      setSubmitted(true);
    }
  };

  const validateForm = () => {
    const newErrors: Errors = {};
    let haveError: boolean = false;
    if (validationRules) {
      Object.keys(validationRules).forEach(fieldName => {
        newErrors[fieldName] = validate(fieldName);
        if (newErrors[fieldName].length > 0) {
          haveError = true;
        }
      });
    }
    setErrors(newErrors);
    return !haveError;
  };

  return (
    <FormContext.Provider
      value={{
        values,
        setValue: (fieldName: string, value: any) => {
          setValues({ ...values, [fieldName]: value });
        },
        errors,
        validate,
        touched,
        setTouched: (fieldName: string) => {
          setTouched({ ...touched, [fieldName]: true });
        },
      }}
    >
      <form noValidate={true} onSubmit={handleSubmit}>
        <fieldset
          disabled={submitting || (submitted && !submitError)}
          id="fieldset"     >
          {children}
          <div id="children"          >
            <PrimaryButton type="submit">{submitCaption}</PrimaryButton>
          </div>
          {submitted && submitError && (
            <p id="failure"            >
              {failureMessage}
            </p>)}
          {submitted && !submitError && (
            <p id="success"            >
              {successMessage}
            </p>)}
        </fieldset>
      </form>
    </FormContext.Provider>
  );
};

从'react'导入{FC，useState，createContext，FormEvent}；
从“/Styles”导入{PrimaryButton，gray5，gray6}；
/**@jsx-jsx*/
从'@emotion/core'导入{css，jsx}；
导出接口值{
[键：字符串]：任意；
}
导出接口错误{
[键：字符串]：字符串[]；
}
导出接口{
[键：字符串]：布尔值；
}
/*提交上的导出接口{
[键：字符串]：任何
} */
接口FormContextProps{
价值观：价值观；
setValue？：（字段名：字符串，值：任意）=>void；
错误：错误；
验证？：（字段名：字符串）=>void；
感动：感动；
setTouched？：（字段名：字符串）=>void；
}
export const FormContext=createContext({
值：{}，
错误：{}，
触摸：{}，
});
类型验证器=（值：any，args？：any）=>字符串；
需要导出常量：验证器=（值：任意）：字符串=>
值===未定义的| |值===空值| |值====''
? '这必须填充'
: '';
export const minLength:Validator=（值：any，长度：number）：string=>
value&&value.length<长度
? `这必须至少为${length}个字符`
: '';
接口验证{
验证器：验证器；
arg？：任何；
}
接口验证属性{
[键：字符串]：验证|验证[]；
}
导出接口提交结果{
成功：布尔；
错误？：错误；
}
界面道具{
提交选项？：字符串；
validationRules？：ValidationProp；
onSubmit：（值：值）=>承诺；
成功消息？：字符串；
失败消息？：字符串；
}
导出常数形式：FC=({
提交选项，
儿童
验证规则，
提交时，
成功消息='successage！'，
failureMessage='出现了问题'，
}) => {
const[values，setValues]=useState（{}）；
const[errors，setErrors]=useState（{}）；
const[toucted，settoucted]=useState（{}）；
const[submiting，setSubmitting]=使用状态（false）；
const[submited，setSubmitted]=使用状态（false）；
const[submitError，setSubmitError]=使用状态（false）；
常量验证=（字段名：字符串）：字符串[]=>{
如果（！validationRules）{
返回[]；
}
如果（！validationRules[fieldName]）{
返回[]；
}
常量规则=数组.isArray（validationRules[fieldName]）
？（validationRules[fieldName]作为验证[]）
：（[validationRules[fieldName]]作为验证[]）；
常量字段错误：字符串[]=[]；
rules.forEach（rule=>{
const error=rule.validator（值[fieldName]，rule.arg）；
如果（错误）{
fieldErrors.push（错误）；
}
});
const newErrors={…errors，[fieldName]：fieldErrors}；
setErrors（newErrors）；
返回字段错误；
};
const handleSubmit=async（e:FormEvent）=>{
e、 预防默认值（）；
if（validateForm（））{
设置提交（真）；
设置子项错误（错误）；
常量结果=等待提交（值）；
setErrors（result.errors | |{}）；
setSubmitError（！result.success）；
设置提交（假）；
setSubmitted（true）；
}
};
常量validateForm=（）=>{
const newErrors:Errors={}；
设haveError:boolean=false；
if（验证规则）{
Object.keys（validationRules）.forEach（fieldName=>{
newErrors[fieldName]=验证（fieldName）；
if（newErrors[fieldName].length>0）{
haveError=true；
}
});
}
setErrors（newErrors）；
返回！haveError；
};
返回(
{
setValues（{…值，[fieldName]：值}）；
},
错误，
验证
感动的，
setTouched：（字段名：字符串）=>{
setTouched（{…touched，[fieldName]：true}）；
},
}}
>
{儿童}
{提交选项}
{已提交&&提交&&(

{failureMessage}
）}
{提交&&！提交&&&(

{成功消息}
）}
);
};

我的/askPage是：

import React, { useState, FC } from 'react';
import { Page } from './Page';
import { Form, required, minLength, Values } from './Form';
import { Field } from './Field';
import { postQuestion } from './QuestionsData';
import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom';
import { isPropertySignature } from 'typescript';

export const AskPage = () => {
  const handleSubmit = async (values: Values) => {
    const question = await postQuestion({
      title: values.title,
      content: values.content,
      userName: 'Fred',
      created: new Date(),
    });
    return { success: question ? true : false };
  };

  return (
    <Page title="Ask a Question">
 {/* I want to add a redirect to this form once I click Submit Your Question */}
      <Form
        submitCaption="Submit Your Question"
        validationRules={{
          title: [{ validator: required }, { validator: minLength, arg: 10 }],
          content: [{ validator: required }, { validator: minLength, arg: 20 }],
        }}
        onSubmit={handleSubmit}
        failureMessage="There was a problem with your question"
        successMessage="Your question was successfully submitted"
      >
        <Field name="title" label="Title" />
        <Field name="content" label="Content" type="TextArea" />
      </Form>
    </Page>
  );
};
export default AskPage;

import React，{useState，FC}来自“React”；
从“./Page”导入{Page}；
从“/Form”导入{Form，required，minLength，Values}；
从“./Field”导入{Field}；
从“/QuestionsData”导入{postQuestion}；
从“react router dom”导入{BrowserRouter，Route，Redirect，Switch，Link}；
从“typescript”导入{isPropertySignature}；
导出常量AskPage=（）=>{
const handleSubmit=async（值：值）=>{
const question=等待postQuestion({
标题：values.title，
内容：values.content，
用户名：“Fred”，
已创建：新日期（），
});
返回{success:question？true:false}；
};
返回(
{/*单击“提交您的问题”后，我想将重定向添加到此表单*/}
);
};
导出默认AskPage；

我使用此代码示例在react中提交表单后重定向。我基本上做了所有需要做的事情，保存答案，然后调用相应的函数将我带到相应的页面。那一页可能会得到答案。另一种方法是使用道具并导入另一个页面

function viewPage() {
  let url = window.location.origin;
  console.log('viewPage', url)
  url=url.concat('/SelfAssessment')
  window.open(url, "_blank");
}

---

那么之后，我是否只执行{viewPage}？当您在React中编码时，您只需在处理表单中的数据后调用一个函数。在我看来，您在handlesubmit中处理数据，因此在验证结束时有一行：setsubmited（true）；输入viewPage（）；在下一行，也许这就是你想要的。函数viewPage（）需要位于/Form文件中，并进行相应的剪切、粘贴和编辑。重新命名