admin管理员组文章数量:1325236
I have installed React using create-react-app. I am submitting form using onSubmit() function. On submitting form from LoginRegister.js Component, below is my LoginRegister.js file code:
import React from 'react';
import DefaultLayout from '../Layout/DefaultLayout';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { userSignupRequest } from '../actions/signupActions';
class LoginRegister extends React.Component {
constructor(props) {
super(props);
this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
//this.state = {about: ''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignupRequest(this.state);
}
render(){
return (
<DefaultLayout>
<section id="page-title">
<div className="container clearfix">
<h1>My Account</h1>
<ol className="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/">Pages</a></li>
<li className="active">Login</li>
</ol>
</div>
</section>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col_two_third col_last nobottommargin">
<h3>Dont have an Account? Register Now.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
<p id="msg">{this.state.errmsg}</p>
<form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>
<div className="col_half">
<label htmlFor="register-form-name">First Name:</label>
<input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-email">Last name:</label>
<input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Phone no.:</label>
<input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
</div>
<input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />
<div className="clear"></div>
<div className="col_full nobottommargin">
<button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
</div>
</div>
</div>
</section>
</DefaultLayout>
)
}
}
LoginRegister.propTypes = {
userSignupRequest: PropTypes.func.isRequired
}
export default connect((state) => { return{} }, {userSignupRequest} ) (LoginRegister);
And action/signupActions file have below code, that calling API and handling response using Reducer:
import axios from 'axios';
export function userSignupRequest(userData){
return dispatch => {
dispatch({"type":"CALL_START"});
axios.post('../user/register', userData).then(response => {
dispatch({"type":"RECEIVE_RESPONSE", "payload":response.data});
}).catch(error => {
dispatch({"type":"RECEIVE_ERROR", "payload":error});
});
}
}
Reducer.js has the below code:
const reducer = (state={}, action) => {
switch(action.type){
case "CALL_START" :{
alert("Hi1");
return {}
break;
}
case "RECEIVE_RESPONSE" : {
//return {...state, data:action.payload}
alert("Hi2");
return {data:action.payload}
break;
}
case "RECEIVE_ERROR" : {
alert("Hi3");
alert(JSON.stringify(action.payload));
return {data:action.payload}
break;
}
}
}
export default reducer;
API is calling and I am getting response properly. How can I show success/error message on my 'LoginRegister.js' ponent on the basis of the response?
I have installed React using create-react-app. I am submitting form using onSubmit() function. On submitting form from LoginRegister.js Component, below is my LoginRegister.js file code:
import React from 'react';
import DefaultLayout from '../Layout/DefaultLayout';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { userSignupRequest } from '../actions/signupActions';
class LoginRegister extends React.Component {
constructor(props) {
super(props);
this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
//this.state = {about: ''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignupRequest(this.state);
}
render(){
return (
<DefaultLayout>
<section id="page-title">
<div className="container clearfix">
<h1>My Account</h1>
<ol className="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/">Pages</a></li>
<li className="active">Login</li>
</ol>
</div>
</section>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col_two_third col_last nobottommargin">
<h3>Dont have an Account? Register Now.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
<p id="msg">{this.state.errmsg}</p>
<form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>
<div className="col_half">
<label htmlFor="register-form-name">First Name:</label>
<input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-email">Last name:</label>
<input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Phone no.:</label>
<input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
</div>
<input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />
<div className="clear"></div>
<div className="col_full nobottommargin">
<button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
</div>
</div>
</div>
</section>
</DefaultLayout>
)
}
}
LoginRegister.propTypes = {
userSignupRequest: PropTypes.func.isRequired
}
export default connect((state) => { return{} }, {userSignupRequest} ) (LoginRegister);
And action/signupActions file have below code, that calling API and handling response using Reducer:
import axios from 'axios';
export function userSignupRequest(userData){
return dispatch => {
dispatch({"type":"CALL_START"});
axios.post('../user/register', userData).then(response => {
dispatch({"type":"RECEIVE_RESPONSE", "payload":response.data});
}).catch(error => {
dispatch({"type":"RECEIVE_ERROR", "payload":error});
});
}
}
Reducer.js has the below code:
const reducer = (state={}, action) => {
switch(action.type){
case "CALL_START" :{
alert("Hi1");
return {}
break;
}
case "RECEIVE_RESPONSE" : {
//return {...state, data:action.payload}
alert("Hi2");
return {data:action.payload}
break;
}
case "RECEIVE_ERROR" : {
alert("Hi3");
alert(JSON.stringify(action.payload));
return {data:action.payload}
break;
}
}
}
export default reducer;
API is calling and I am getting response properly. How can I show success/error message on my 'LoginRegister.js' ponent on the basis of the response?
Share Improve this question edited Mar 16, 2024 at 13:14 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked May 26, 2017 at 5:14 AtulAtul 1,7215 gold badges17 silver badges26 bronze badges 5- Are you using Provider and do you have more reducers that you have bined using bineReducers – Shubham Khatri Commented May 26, 2017 at 5:35
- Yes I am using "provider" but ryt now I am not using "bineReducers". – Atul Commented May 26, 2017 at 6:05
- Can you add your loginRegister code – Shubham Khatri Commented May 26, 2017 at 6:09
- one last question, how do you want to display the error or success message and where in the Component exactly – Shubham Khatri Commented May 26, 2017 at 6:25
- as normally we show, in an specific div or any html tag. As I am trying to show ryt now in "<p id="msg">". Also want to apply some style on that "p" tag as per message. – Atul Commented May 26, 2017 at 6:28
2 Answers
Reset to default 3So I will suggest yo uto make a few changes
When you use connect then you should probably connect the action to dispatch or directly call it in the ponent by not providing the second parameter to connect
get the state in your ponent. For this you can make use of mapStateToProps
You would probably want to display a proper message on Register, you can do that form the
userSignupRequestaction .
change your code to the below
UserSignUpRequest actions
import axios from 'axios';
export function userSignupRequest(userData){
return dispatch => {
dispatch({"type":"CALL_START"});
axios.post('../user/register', userData).then(response => {
dispatch({"type":"RECEIVE_RESPONSE", "payload":"Successfully Registered"});
}).catch(error => {
dispatch({"type":"RECEIVE_ERROR", "payload":"Error Registering " + JSON.stringify(error)});
});
}
}
LoginRegister
import {bindActionCreators} form 'redux';
class LoginRegister extends React.Component {
constructor(props) {
super(props);
this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
//this.state = {about: ''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignupRequest({...this.state})
}
render(){
console.log(this.props.registerMessage)
return (
<DefaultLayout>
<section id="page-title">
<div className="container clearfix">
<h1>My Account</h1>
<ol className="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/">Pages</a></li>
<li className="active">Login</li>
</ol>
</div>
</section>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col_two_third col_last nobottommargin">
<h3>Dont have an Account? Register Now.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
<p id="msg">{this.props.registerMessage}</p>
<form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>
<div className="col_half">
<label htmlFor="register-form-name">First Name:</label>
<input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-email">Last name:</label>
<input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Phone no.:</label>
<input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
</div>
<input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />
<div className="clear"></div>
<div className="col_full nobottommargin">
<button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
</div>
</div>
</div>
</section>
</DefaultLayout>
)
}
}
function mapStateToProps(state){
return {
registerMessage: state.data
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({userSignupRequest: userSignupRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps ) (LoginRegister);
Reducer
const initialState = {
data: '',
status: ''
}
const reducer = (state=initialState, action) => {
switch(action.type){
case "CALL_START" :{
alert("Hi1");
return {}
break;
}
case "RECEIVE_RESPONSE" : {
//return {...state, data:action.payload}
return {...state, data:action.payload}
break;
}
case "RECEIVE_ERROR" : {
alert(JSON.stringify(action.payload));
return { ...state, data:action.payload}
break;
}
default: {
return state
}
}
}
export default reducer;
But here I don't know how to show success/error message on my 'LoginRegister.js' ponent on th basis of response
Subscribe to the state using @connect.
More
- http://redux.js/docs/basics/UsageWithReact.html
本文标签： javascriptShow messages on the basis of API response in ReactjsStack Overflow
版权声明：本文标题：javascript - Show messages on the basis of API response in React.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742167987a2426185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论