我是 React 的初学者,我正在尝试使用 Prop 在屏幕之间传递数据,但不起作用,这是我的代码:
Login.jsx:我有一个方法可以提交表单,从 API 获取数据并验证它是否为真,然后导航到用户页面:
handleSubmit = event => {
var user = this.state.user
var password = this.state.password
this.state.users.forEach(users => {
if ((users.name === user) && (users.password === password)) {
alert("Login Successful!")
this.setState(() => ({
toUser: true,
isLogin: true,
userId: users.id,
}));
} else {
alert("Verify the information you have entered!")
}
});
}
render() {
if (this.state.toUser === true) {
return <Redirect to='/user' />
}
return (
<div className="Login">
<h3>USER AREA</h3>
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="user" bsSize="large">
<ControlLabel>Username</ControlLabel>
<FormControl
autoFocus
type="user"
value={this.state.user}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password" />
</FormGroup>
<Button
block
bsStyle="primary"
bsSize="large"
disabled={!this.validateForm()}
type="submit"
>
LOGIN
</Button>
</form>
</div>
);
}
User.jsx:我想从登录接收数据以在用户页面中使用,我试过这样的事情:
constructor(props) {
super(props);
this.state = {
user: "",
password: "",
'users': [],
toUser: false,
userId: this.props.userId,
};
}
render() {
return (
<div className="Login">
<h3>USER AREA {this.props.userId}</h3>
</div>
);
}
这就是我想要的结果:
最佳答案
我使用 history prop 传递数据做了什么,
this.props.history.push({
pathname:"/user",
state:{
userId:"1"
}
});
并且你可以访问像this.props.location.state.userId
handleSubmit = event => {
var user = this.state.user
var password = this.state.password
this.state.users.forEach(users => {
if ((users.name === user) && (users.password === password)) {
alert("Login Successful!")
this.props.history.push({
pathname:"/user",
state:{
userId:users.id
}
});
} else {
alert("Verify the information you have entered!")
}
});
}
render() {
return (
<div className="Login">
<h3>USER AREA</h3>
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="user" bsSize="large">
<ControlLabel>Username</ControlLabel>
<FormControl
autoFocus
type="user"
value={this.state.user}
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
value={this.state.password}
onChange={this.handleChange}
type="password" />
</FormGroup>
<Button
block
bsStyle="primary"
bsSize="large"
disabled={!this.validateForm()}
type="submit"
>
LOGIN
</Button>
</form>
</div>
);
}
关于javascript - 跨屏幕传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52946087/