当前位置: 首页 > 知识库问答 >
问题:

从React[复制]中的方法内部重定向

萧辰沛
2023-03-14

相对来说,我是ReactJS的初学者。我一直在寻找这个问题的答案。我有一份表格,要分成两部分。第一部分包含一些文本输入和单选按钮。在第1部分的末尾有一个继续按钮。按钮如下:

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

这是继续按钮的单击处理程序:

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

因此,单击继续按钮后,我必须将数据存储在数据库中,然后转到表单的第2部分,该部分将显示在新页面上。有没有一种方法可以重定向到第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;

共有1个答案

张博涛
2023-03-14

您需要添加一个

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

 类似资料:
  • 我试图从碎片屏幕调用一个活动中的方法。 我有一个名为myMethod()的方法,它位于名为MyActivity的活动中;我有一个片段叫做Screen1Fragment。 我想给我的活动打电话。从Screen1Fragment内部创建myMethod(),但我不确定如何执行此操作。 以前,Screen1Fragment是一个活动,因此我扩展了MyActivity,以便可以直接调用myMethod()

  • 问题内容: 这个问题是密切相关的这一个(已回答)。 在整个项目中,我使用JSF命令按钮在屏幕之间导航,其中action属性将指向返回字符串的函数。字符串是新屏幕的名称,例如 将返回一个字符串,例如,它将引导用户 出于移动目的,我不得不使用ajax调用来使clickable,例如 这有效,我已经测试过了,并且返回了正确的结果(在返回之前测试并记录了它) 但是,没有重定向发生。Ajax调用尚未完成。如

  • 这个问题与这个问题密切相关(已回答)。 在整个项目中,我使用JSF命令按钮在屏幕之间导航,其中action属性将指向返回字符串的函数。字符串是新屏幕的名称,例如。 将返回一个字符串,例如,它将用户引导到 出于移动目的,我必须使用ajax调用使panelGrid可点击,例如。 这个工作原理,我已经测试过了,并返回了正确的结果(在返回之前记录它进行了测试) 但是,没有重定向发生。ajax调用还没有做到

  • 请查看这段编译良好的代码:

  • 考虑到下面的代码,为什么即使优惠券、偏移量和基已在if语句中初始化,编译器仍会在第5行抱怨?由于“percent”变量的默认值为0.0,因此if语句将运行并设置这些值。

  • 我有一个内部类,它在我的主类中扩展了异步任务 我在内部类中获得了分配给我的字符串变量“变量”的正确值,但我无法访问我的主类中的值。