Reactjs Redux dispatcher for onChange event resets input field - reactjs

Question

I'm trying to implement a simple login solution using redux pattern and react-router v4.
I'm saving the email input in global state by using onChange event. The function in onchange event dispatches action, passing e.target as its input.
However as soon as the dispatch occurs, the input field gets reset. I have tested the input field by commenting out the dispatcher and it works, thus concluding the dispatcher is somehow resetting input field.
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.state = this.props.store.getState()
}
handleSignup(){
this.setState({showSignup:!this.state.showSignup})
console.log(this.state.showSignup);
}
validatorDispatch(e){
e.preventDefault()
var target = e.target
this.props.store.dispatch(input_validator_action(target));
}
render(){
let emailValidationClassName = "form-control"
let passwordValidationClassName = "form-control"
let confirmPasswordValidationClassName = "form-control"
if (this.state.password){
passwordValidationClassName="form-control " + (this.state.isPasswordValid ? "is-valid":"is-invalid")
}
if (this.state.email){
emailValidationClassName="form-control " + (this.state.isEmailValid ? "is-valid":"is-invalid")
}
if (this.state.confirmPassword){
confirmPasswordValidationClassName="form-control " + (this.state.doesPasswordMatch ? "is-valid":"is-invalid")
}
return (<div>
<div className="row m-5">
<div className="col-md-4"></div>
<div className="col-md-4">
<div className="form-group">
<label htmlFor="emailAddress">Email address: </label>
<input type="email" className={emailValidationClassName} name="email" ref="email" onChange={(e)=>this.validatorDispatch(e)} placeholder="Enter email"/>
{this.state.isEmailValid ? null
: <div className="invalid-feedback">
Please provide a valid email address.
</div>}
</div>
<div className="form-group">
<label htmlFor="password">Password: </label>
<input type="password" className={passwordValidationClassName} name="password" ref="password" onChange={this.validatorDispatch.bind(this)} placeholder="Password"/>
{this.state.isPasswordValid ? null
: <div className="invalid-feedback">
Password length should be greater than 8, and contain lowercase, uppercase, digits and special symbols.
</div>}
<Link to="/forgotpassword"><small>Forgot Password?</small></Link>
</div>
<div className="form-check">
<label className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" checked={this.state.showSignup} onChange={this.handleSignup.bind(this)}/>
<span className="custom-control-indicator"></span>
<span className="custom-control-description">I am a new User</span>
</label>
</div>
<button className="btn btn-info">Submit</button>
</div>
<div className="col-md-4"></div>
</div>
</div>
)
}
}
I'd really appreciate your insights.
Edited validatorDispatch function below
var input = e.target.value
var name = e.target.name
this.props.store.dispatch(input_validator_action(input,name));
My reducer looks like this
import validator from 'email-validator';
var passwordValidator = require('password-validator')
var schema = new passwordValidator();
schema
.has().symbols()
.is().min(8)
.has().uppercase()
.has().lowercase()
.has().digits()
.has().not().spaces()
const initialState = {}
function input_validator(action,state){
let input = action.payload.textInput
let name = action.payload.textName
switch (name) {
case "email":
if(validator.validate(input)){
return Object.assign({},state,{isEmailValid:true,email:input})
}
else{
return Object.assign({},state,{isEmailValid:false,email:input})
}
case "password":
if(schema.validate(input)){
return Object.assign({},state,{isPasswordValid:true,password:input})
}
else{
return Object.assign({},state,{isPasswordValid:false,password:input})
}
case "confirmPassword":
if(input===state.password){
return Object.assign({},state,
{doesPasswordMatch:true,confirmPassword:input})
}
else{
return Object.assign({},state,
{doesPasswordMatch:false,confirmPassword:input})
}
default:
return state
}
}
export default (state=initialState, action) => {
switch(action.type){
case 'INPUT_VALIDATOR':
return input_validator(action,state)
default:
return state
}
}
Action
export const input_validator_action = (input,name) =>{
return{
type:'INPUT_VALIDATOR',
payload:{
textInput:input,
textName:name
}
}
}

Answer 1

I finally figured it out. It helped me understand React Router v4 even better. I was rendering my LoginForm class file (named login.js) from a different file (named EntryRoute.js) as a route using component prop.
i.e.
<Switch>
<Route exact path="/" component={EnteryButton}/>
<Route path="/login" component={()=><Login store={props.store}/>} />
</Switch>
Instead it should be done using render prop.
as in-
<Route path="/login" render={()=><Login store={props.store}/>} />
The concept behind it is that when you pass inline function to component prop, it unmounts and mounts the passed function at every state change. So that's why my input field was being reset, since value inside the field was used inside global redux state.