提交表单后重定向到另一个页面 [英] redirect to another page after submitting a form

查看：203
本文介绍了提交表单后重定向到另一个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

提交表单后如何重定向到另一个页面?添加我的代码需要什么代码?这是我的代码 simple.js

从'react'导入React；import { Field, reduxForm } from 'redux-form';const SimpleForm = props =>{const { handleSubmit, Pristine, reset, submit } = props;返回 (<form onSubmit={handleSubmit}><div><label>名字</label><div><字段名字=名字"组件=输入"类型=文本"占位符=名字"必需的/>

<div><label>姓氏</label><div><字段姓名=姓氏"组件=输入"类型=文本"占位符="姓氏"必需的/>

<div><label>电子邮件</label><div><字段名称=电子邮件"组件=输入"类型=电子邮件"占位符=电子邮件"必需的/>

<div><标签>性别</标签><div><标签><Field name="sex" component="input" type="radio" value="male"/>{' '}男性<标签><Field name="sex" component="input" type="radio" value="female"/>{' '}女性

<div><label>最喜欢的颜色</label><div><Field name="favoriteColor" component="select" ><选项/><option value="ff0000">红色</option><option value="00ff00">Green</option><option value="0000ff">蓝色</option></字段>

<div><label htmlFor="已雇用">已雇用</label><div><字段姓名=受雇"身份证=就业"组件=输入"类型=复选框"/>

<div><label>备注</label><div><Field name="notes" component="textarea" required/>

<div><button type="submit" disabled={pristine ||提交}>提交<button type="button" disabled={pristine ||submit} onClick={reset}>清除值

</表单>);};导出默认 reduxForm({form: 'simple',//此表单的唯一标识符})(简单的模式);

这是一个简单的表单，我想定向到一个名为 asyncValidateform.js 的登录页面..这是那个页面..

从'react'导入React；import { Field, reduxForm } from 'redux-form';从'./validate'导入验证；从 './asyncValidate' 导入 asyncValidate;const renderField = ({ input, label, type, meta: { asyncValidating, touch, error } },) =>(<div><label>{label}</label><div className={asyncValidating ?'异步验证':''}><input {...input} type={type} placeholder={label}/>{感动&&错误&&<span>{错误}</span>}
);const AsyncValidationForm = props =>{const { handleSubmit, Pristine, reset, submit } = props;返回 (<form onSubmit={handleSubmit}><字段名称=用户名"类型=文本"组件={renderField}标签=用户名"/><字段名称=密码"类型=密码"组件={renderField}标签=密码"/><字段名称=确认密码"类型=密码"组件={renderField}标签=确认密码"/><div><button type="submit" disabled={submitting}>注册</button><button type="button" disabled={pristine ||submit} onClick={reset}>清除值
</表单>);};导出默认 reduxForm({form: 'asyncValidation',//此表单的唯一标识符证实，异步验证，asyncBlurFields: ['用户名'],})(AsyncValidationForm);

&这是我的验证页面

const validate = values =>{常量错误 = {};如果(！值.用户名){errors.username = '必需';}如果(！值.密码){errors.password = '必需';}如果 (!values.confirmpassword ) {errors.confirmpassword = '必需' ;}else if (values.confirmpassword !== values.password) {errors.confirmpassword = '密码不匹配' ;}返回错误；};导出默认验证；

index.js 页面

从react"导入React；从react-dom"导入 ReactDOM；从react-redux"导入{提供者}；从redux-form-website-template"导入{值}；从./store"导入商店；从./showResults"导入showResults；从./SimpleForm"导入SimpleForm；const rootEl = document.getElementById("root");ReactDOM.render(<提供者商店={商店}><div style={{ padding: 15 }}><h2>简单形式</h2><SimpleForm onSubmit={showResults}/><值形式=简单"/>
</提供者>,根);

我的代码需要做哪些修改??我想先进入simple.js页面，输入详细信息后点击提交页面必须重定向到asynValidateForm.js页面..请帮我理一下这个问题..谢谢...

解决方案

使用要重定向到的确切路由定义路由文件中的所有组件.您的 routes.js 文件应如下所示.

从'react'导入React；import { BrowserRouter as Router, Route, Link } from 'react-router-dom';从 './components/home/home' 导入 Home；从./components/aboutUs/aboutUs"导入关于我们；const 路由 = () =>(<路由器><路由精确路径="/" component={Home}/><Route path="/aboutus" component={AboutUs}/></路由器>);导出默认路由；

并在 App.js 中导入 Routes，它基本上是您的 React 应用程序的入口点.

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./routes'导入路由；ReactDOM.render(, document.getElementById('root'));

在 html 中使用 Test 而不是 Test
或者，如果您想使用 javascript 重定向，请使用 this.props.router.push('/route')

How can I redirect to another page after submitting a form? What code is needed to add my code?? This is my code simple.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';


const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
            required
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
             required
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
             required
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" value="male" />
            {' '}
            Male
          </label>
          <label>
            <Field name="sex" component="input" type="radio" value="female" />
            {' '}
            Female
          </label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select" >
            <option />
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea"  required />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};


export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

This is the simple form , I want to direct to a login page called asyncValidateform.js.. HERE IS THAT PAGE..

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validate from './validate';
import asyncValidate from './asyncValidate';

const renderField = (
  { input, label, type, meta: { asyncValidating, touched, error } },
) => (
  <div>
    <label>{label}</label>
    <div className={asyncValidating ? 'async-validating' : ''}>
      <input {...input} type={type} placeholder={label} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const AsyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />

      <Field
        name="confirmpassword"
        type="password"
        component={renderField}
        label="Confirm Password"
      />
      <div>
        <button type="submit" disabled={submitting}>Sign Up</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'asyncValidation', // a unique identifier for this form
  validate,
  asyncValidate,
  asyncBlurFields: ['username'],
})(AsyncValidationForm);

& this is my validate page

const validate = values => {


  const errors = {};
  if (!values.username) {
    errors.username = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  if (!values.confirmpassword ) {
    errors.confirmpassword = 'Required' ;
  }
   else if (values.confirmpassword !== values.password) {
    errors.confirmpassword = 'Password mismatched' ;
  }




  return errors;


};

export default validate;

index.js page

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import SimpleForm from "./SimpleForm";


const rootEl = document.getElementById("root");

ReactDOM.render(
  <Provider store={store}>
    <div style={{ padding: 15 }}>
      <h2>Simple Form</h2>
      <SimpleForm onSubmit={showResults} />
      <Values form="simple" />
    </div>
  </Provider>,
  rootEl
);

What all changes need to make in my code??I want to first enter into the simple.js page after entering details and by clicking the submit the page must redirect to asynValidateForm.js page.. Please help me to sort out this problem.. Thank you ...

解决方案

Define all your components in routes file with the exact route you want to redirect to . Your routes.js file should look something like this.

import React from 'react';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';
import Home from './components/home/home';
import AboutUs from './components/aboutUs/aboutUs';
const Routes = () => (
    <Router>
            <Route exact path="/" component={Home} />
            <Route path="/aboutus" component={AboutUs} />
    </Router>
);

export default Routes;

And import Routes in App.js which is basically the entry point of your react application.

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';

ReactDOM.render(<Routes />, document.getElementById('root'));

Use <Link to="/path">Test</Link> in your html instead of <a>Test</a>
Or if you want to redirect with javascript , use this.props.router.push('/route')

这篇关于提交表单后重定向到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆