Javascript 从React中的方法内部重定向

我在ReactJS方面相对来说是个初学者。我一直在寻找这个问题的答案已经有一段时间了。我有一张表格要分为两部分。第一部分包含一些文本输入和单选按钮。第1部分末尾有一个“继续”按钮。按钮如下所示：

<div className="ProceedButton">
  <button name="Proceed" type="button" onClick={this.handleClick}>Proceed</button>
</div>

因此，单击“继续”按钮后，我必须将数据存储在数据库中，然后转到表单的第2部分，该部分将显示在新页面上。有没有办法从handleClick（）中重定向到第2部分？如果不是，我如何用最少的代码实现它

提前谢谢。 以下是表格第1部分的完整代码：

import React, { Component } from 'react';
import firebase from './firebase.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';

class IntroForm extends Component{
    constructor(){
        super();
        this.state={
            userID:1,
            state:"",
            age:'',
            ethnicity:"Hispanic or Latino",
            race:"American Indian",
            sex:"Male",
            height:"",
            weight:"",
        };
        console.log(this.state);
        this.handleInputChange=this.handleInputChange.bind(this);
        this.handleClick=this.handleClick.bind(this);
    }


    componentDidMount(){
        const dbRef=firebase.database().ref().child('registrations');
        const countRef=dbRef.child('userID');
        countRef.on('value',snap=>{
            this.setState({
                userID:(snap.val()+1)
            });
        });
    }

    handleInputChange(event){
        const target=event.target;
        const name=target.name;
        var value;
        if((target.type==="radio"&&target.checked)||target.type!=="radio") value=target.value;
        this.setState({
            [name]:value
        });

    }

    handleClick(event){
        console.log(this.state);
        firebase.database().ref('registrations/'+this.state.userID).set(this.state);
        firebase.database().ref('registrations/userID').set(this.state.userID);
    }

    render() {
        return(
            <div>
            <div className="State">
                <div className="Head">
                State
                </div>
                <div className="StateField">
                <input 
                    name="state"
                    type="text"
                    onChange={this.handleInputChange} />
                </div>
                <hr />
            </div>
            <div className="Age">
                <div className="Head">
                Age
                </div>
                <div className="AgeField">
                <input
                    name="age"
                    type="number"
                    onChange={this.handleInputChange} />
                </div>
                <hr />
            </div>
            <div className="Ethnicity">
                <div className="Head">
                Ethnicity
                </div>
                <div className="EthnicityField">
                <input  name="ethnicity"    type="radio"    value="Hispanic or Latino"          onClick={this.handleInputChange} defaultChecked /> Hispanic or Latino
                <input  name="ethnicity"    type="radio"    value="Non-Hispanic or Non-Latino"  onClick={this.handleInputChange} /> Non-Hispanic or Non-Latino
                </div>
                <hr />
            </div>
            <div className="Race">
                <div className="Head">
                Race
                </div>
                <div className="RaceField">
                <input name="race" type="radio" value="American Indian" onClick={this.handleInputChange} defaultChecked /> American Indian
                <input name="race" type="radio" value="Asian"           onClick={this.handleInputChange}/> Asian
                <input name="race" type="radio" value="Native Hawaiian or Other Pacific Islander" onClick={this.handleInputChange}/> Hawaiian or Other Pacific Islander
                <input name="race" type="radio" value="Black or African American" onClick={this.handleInputChange}/> Black or African American
                <input name="race" type="radio" value="White"           onClick={this.handleInputChange}/> White
                </div>
                <hr />
            </div>
            <div className="Sex">
                <div className="Head">
                Sex
                </div>
                <div className="SexField">
                <input name="sex" type="radio" value="Male"     onClick={this.handleInputChange} defaultChecked /> Male
                <input name="sex" type="radio" value="Female"   onClick={this.handleInputChange}/> Female
                </div>
                <hr />
            </div>  
            <div className="Height">
                <div className="Head">
                Height
                </div>
                <div className="HeightField">
                <input name="height" type="number" placeholder="In inches" onChange={this.handleInputChange}/>
                </div>
                <hr />
            </div>
            <div className="Weight">
                <div className="Head">
                Weight
                </div>
                <div className="WeightField">
                <input name="weight" type="number" placeholder="In pounds" onChange={this.handleInputChange}/>
                </div>
                <hr />
            </div>
            <div className="ProceedButton">
            <button name="Proceed" type="button" onClick={this.handleClick} >Proceed</button>
            </div>
            </div>
        );
    }
}
export default IntroForm;

import React，{Component}来自'React'；
从“/firebase.js”导入firebase；
从“react Router dom”导入{Router，Route，Link，IndexRoute，IndexLink，Switch，HashHistory，Browser History，withRouter}；
类IntroForm扩展组件{
构造函数（）{
超级（）；
这个州={
用户ID:1，
州：“，
年龄：''，
种族：“西班牙裔或拉丁裔”，
种族：“美洲印第安人”，
性别：“男”，
高度：“，
重量：“，
};
console.log（this.state）；
this.handleInputChange=this.handleInputChange.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
const dbRef=firebase.database（）.ref（）.child（'registrations'）；
const countRef=dbRef.child（'userID'）；
countRef.on（'value'，snap=>{
这是我的国家({
userID:（snap.val（）+1）
});
});
}
handleInputChange（事件）{
const target=event.target；
const name=target.name；
var值；
如果（（target.type==“radio”&&target.checked）| | target.type！==“radio”）值=target.value；
这是我的国家({
[名称]：值
});
}
handleClick（事件）{
console.log（this.state）；
firebase.database（）.ref（'registrations/'+this.state.userID）.set（this.state）；
firebase.database（）.ref（'registrations/userID'）.set（this.state.userID）；
}
render（）{
返回(
陈述

年龄

种族渊源
拉美裔还是拉丁裔
非西班牙裔或非拉丁美洲人

比赛
美洲印第安人
亚洲的
夏威夷人或其他太平洋岛民
黑人还是非裔美国人
白色

性
男性
女性

高度

重量

继续
);
}
}
导出默认格式；

App.js：

import React, { Component } from 'react';
import './App.css';
import TopBar from './js/TopBar.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
import IntroForm from './js/IntroForm.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" component={StartButton}/>
          <Route exact path="/intro" component={IntroForm}/>
        </Switch>
      </div>
    );
  }
}

const StartButton = withRouter(({ history }) => (
  <button
    type='button'
    name="StartButton"
    style={{"background":"#0000ff","textAlign":"center","color":"#ffffff","width":"100px","height":"30px"}}
        onClick={() => { history.push('/intro') }}
  >
    Start
  </button>
))

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“/js/TopBar.js”导入TopBar；
从“react Router dom”导入{Router，Route，Link，IndexRoute，IndexLink，Switch，HashHistory，Browser History，withRouter}；
从“/js/IntroForm.js”导入IntroForm；
类应用程序扩展组件{
render（）{
返回(
);
}
}
const StartButton=带路由器（{history}）=>(
{history.push（'/intro'）}
>
开始
))
导出默认应用程序；

对于表单的第二部分，您需要在

中添加一个

，然后在第一个表单中，您可以执行以下操作：

---

this.props.history.push（'/form2'）

您能发布所有代码吗？您正在使用

react路由器

对吗，所以你可以使用javascript的window.location对象。@科林，我已经提供了完整的代码。@PraveenKumar说实话，我不知道如何使用它，你能给我举个例子吗？你在哪里设置了路线？非常感谢！）

import React, { Component } from 'react';
import './App.css';
import TopBar from './js/TopBar.js';
import { Router, Route, Link, IndexRoute, IndexLink, Switch, HashHistory, BrowserHistory, withRouter } from 'react-router-dom';
import IntroForm from './js/IntroForm.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" component={StartButton}/>
          <Route exact path="/intro" component={IntroForm}/>
        </Switch>
      </div>
    );
  }
}

const StartButton = withRouter(({ history }) => (
  <button
    type='button'
    name="StartButton"
    style={{"background":"#0000ff","textAlign":"center","color":"#ffffff","width":"100px","height":"30px"}}
        onClick={() => { history.push('/intro') }}
  >
    Start
  </button>
))

export default App;