Question

我是ReactJS的初学者。我一直在寻找这个问题的答案已有一段时间了。我有一个表格，可分为两部分。第一部分包含一些文本输入和单选按钮。第1部分末尾有一个Proceed按钮。按钮如下：

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

这是Proceed Button的点击处理程序：

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

因此，在单击Proceed按钮后，我必须将数据存储在数据库中，然后转到要在新页面上显示的表单的第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;

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;

Answer 1

您需要在<Route />中为表单的第二部分添加<Switch />，然后以第一种形式添加：

this.props.history.push('/form2')。

从React中的方法内部重定向

1 个答案: