文章/答案/技术大牛

发布

社区首页 >问答首页 >提交表单后重定向到另一个页面

问提交表单后重定向到另一个页面
EN

Stack Overflow用户

提问于 2018-04-06 12:56:51

回答 1查看 16.8K关注 0票数 1

提交表单后如何重定向到其他页面？添加我的代码需要哪些代码？？这是我的代码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);

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

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

这是我的验证页面(&T)

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页面

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

在我的代码中需要做哪些更改?我想在输入详细信息并单击提交页面必须重定向到asynValidateForm.js页面后，首先进入simple.js页面。请帮我解决这个问题。谢谢..。

redux-form

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-06 14:42:16

在routes文件中定义您的所有组件，其中包含您要重定向到的确切路由。您的routes.js文件应该如下所示。

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;

并在App.js中导入路由，这基本上是您的react应用程序的入口点。

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

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

在html中使用<Link to="/path">Test</Link>而不是<a>Test</a>

或者，如果您想使用javascript重定向，请使用this.props.router.push('/route')

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49685587

复制

相似问题

问提交表单后重定向到另一个页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提交表单后重定向到另一个页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问提交表单后重定向到另一个页面
EN