相对来说,我是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;
您需要添加一个
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语句将运行并设置这些值。
我有一个内部类,它在我的主类中扩展了异步任务 我在内部类中获得了分配给我的字符串变量“变量”的正确值,但我无法访问我的主类中的值。