Question

我正在尝试使用redux模式和react-router v4实现一个简单的登录解决方案。我通过使用onChange事件将电子邮件输入保存为全局状态。 onchange事件中的函数调度操作，将e.target作为其输入传递。但是，只要发生调度，输入字段就会重置。我通过注释掉调度程序来测试输入字段并且它有效，因此总结调度程序以某种方式重置输入字段。

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>
)
}
}

我非常感谢您的见解。

在

下编辑了validatorDispatch函数

var input = e.target.value
var name = e.target.name
this.props.store.dispatch(input_validator_action(input,name));

我的减速机看起来像这样

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
}
}

动作

export const input_validator_action = (input,name) =>{
return{
type:'INPUT_VALIDATOR',
payload:{
  textInput:input,
  textName:name
}
}
}

Answer 1

我终于明白了。它帮助我更好地理解了React Router v4。我将我的LoginForm类文件（名为login.js）从另一个文件（名为EntryRoute.js）呈现为使用组件prop的路径。即。

<Switch>
    <Route exact path="/" component={EnteryButton}/>
    <Route path="/login" component={()=><Login store={props.store}/>} />
</Switch>

相反应该使用渲染道具来完成。如在 -

<Route path="/login" render={()=><Login store={props.store}/>} />

它背后的概念是当你将内联函数传递给组件prop时，它会在每次状态更改时卸载并挂载传递的函数。这就是为什么我的输入字段被重置的原因，因为字段内的值是在全局redux状态中使用的。

用于onChange事件的Reactjs Redux调度程序重置输入字段

在

我的减速机看起来像这样

动作

1 个答案: