提交redux-form后如何重定向到主页?

时间:2017-06-13 13:21:47

标签: reactjs redux-form

我创建了一个redux表单,当点击提交按钮时,该表单没有重定向到app.js页面,网址会更改为http://localhost:3000/?name=Cook&phone=45625465265&email=cook%40yahoo&work=Engineer&city=

这就是我写的 -

form.js

const Form=({handleSubmit})=>(
  <form onSubmit={handleSubmit}>
    <center>
    <div>
      <label>First Name</label>
      <Field type="text" component="input" placeholder="Name" name="name"/>
    </div>
    <div>
      <label>Address</label>
      <Field type="text" component="input" placeholder="Phone" name="phone" />
    </div>
    <button type="submit">Submit</button>
  </center>
  </form>
)


export default reduxForm({
  form: 'form',
  fields: ['name', 'address']
})(Form);

add.js

class AddNew extends Component{
  handleSubmit = (values) => {
      console.log('This Values',values)
  }
  render() {


    return (
    <div style={{ padding: 150 }}>
      <Add onSubmit={this.handleSubmit}/>
    </div>
  )}
  }

1 个答案:

答案 0 :(得分:1)

为了Redirect,您可以做的是handleSubmit组件的AddNew功能,您可以使用this.props.history.push()

调用动态路由

现在假设您在路径App.js

的路线中指定了/app

您可以执行以下操作

import {withRouter} from 'react-router'

class AddNew extends Component{

  handleSubmit = (values) => {
      console.log('This Values',values)
      this.props.history.push('/app');
  }
  render() {


    return (
    <div style={{ padding: 150 }}>
      <Add onSubmit={this.handleSubmit}/>
    </div>
  )}
  }

export default withRouter(AddNew);