Я новичок в реакции, и я пытаюсь отправить некоторые данные в качестве параметра в history.push.
В основном я вызываю метод нажатием кнопки, а внутри метода я вызываю api. Если я получаю успешный ответ, я перенаправляюсь на другую страницу, и мне также нужно передать некоторые данные.
Ниже мой код для этого:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
enteredName: null,
enteredPwd: null,
rescode: null,
userName: null,
formatDesc: null,
userFormat : null,
success: false,
responseJson : null,
};
}
state = {
enteredName: null,
enteredPwd: null,
rescode: null,
userName: null,
formatDesc: null,
userFormat : null,
success: false,
responseJson : null,
}
render=() =>{
return (
<Router>
<div id= "login-page">
<div className="back-image" style={{height:"100vh"}}>
<div className="container">
<form className="form-login" action="index.html">
<h2 className="form-login-heading">sign in now</h2>
<div className="login-wrap">
<label>User ID</label>
<input type="text" ref="usrname" className="form-control" placeholder="User ID" autofocus/>
<br/>
<label>Password</label>
<input type="password" ref = "password" className="form-control" placeholder="Password"/>
<br/>
<a className="btn btn-theme btn-block" onClick={this.login.bind(this)}><i className="fa fa-lock mr-10"/>SIGN IN</a>
<Dialog ref={(component) => { this.dialog = component }} />
</div>
</form>
</div>
</div>
</div>
</Router>
);
}
login = (e) => {
e.preventDefault();
fetch('some url', {
method: 'POST',
body: JSON.stringify({
"userId": this.refs.usrname.value,
"password": this.refs.password.value
})
})
.then((response) => response.json())
.then((responseJson) => {
console.log(`response: ` , responseJson)
if (responseJson.errorCode === '00') {
this.setState({ rescode: responseJson.errorCode })
this.setState({ userName: responseJson.userName })
this.setState({ formatDesc: responseJson.formatDesc });
this.setState({userFormat : responseJson.userFormat});
this.setState({success : true});
this.setState({responseJson: responseJson});
this.props.history.push(
'/Taskactive',
{
role_id : this.userFormat,
userName : this.userName
}
);
}
else {
alert("Error Logging in.." + responseJson.errorMsg);
this.refs.usrname.value = "";
this.refs.password.value = "";
}
})
.catch((error) => {
console.error(error);
});
this.refs.usrname.value = "";
this.refs.password.value = "";
}
так что до сих пор все в порядке, но теперь мне нужно прочитать переданные данные, то есть role_id и userName на следующей странице, то есть Taskactive. Итак, как мы можем прочитать эти данные в Taskactive.jsx?
