我正在使用redux- form模糊验证。在将第一个字符输入输入元素后,它失去了焦点,我必须再次单击它才能继续输入。它仅对第一个字符执行此操作。后续字符类型仍然是重点。这是我的基本登录表单示例:
redux- form
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Field, reduxForm } from 'redux-form'; import * as actions from '../actions/authActions'; require('../../styles/signin.scss'); class SignIn extends Component { handleFormSubmit({ email, password }) { this.props.signinUser({ email, password }, this.props.location); } renderAlert() { if (this.props.errorMessage) { return ( <div className="alert alert-danger"> {this.props.errorMessage} </div> ); } else if (this.props.location.query.error) { return ( <div className="alert alert-danger"> Authorization required! </div> ); } } render() { const { message, handleSubmit, prestine, reset, submitting } = this.props; const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => ( <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}> <label for={label} className="sr-only">{label}</label> <input {...input} placeholder={label} type={type} className="form-control" /> <div class="text-danger"> {touched ? error: ''} </div> </div> ); return ( <div className="row"> <div className="col-md-4 col-md-offset-4"> <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} className="form-signin"> <h2 className="form-signin-heading"> Please sign in </h2> {this.renderAlert()} <Field name="email" type="text" component={renderField} label="Email Address" /> <Field name="password" type="password" component={renderField} label="Password" /> <button action="submit" className="btn btn-lg btn-primary btn-block">Sign In</button> </form> </div> </div> ); } } function validate(values) { const errors = {}; if (!values.email) { errors.email = 'Enter a username'; } if (!values.password) { errors.password = 'Enter a password' } return errors; } function mapStateToProps(state) { return { errorMessage: state.auth.error } } SignIn = reduxForm({ form: 'signin', validate: validate })(SignIn); export default connect(mapStateToProps, actions)(SignIn);
发生这种情况是因为您renderField每次渲染时都将其重新定义为新组件,这意味着它看起来像React 的 新 组件,因此它将卸载原始组件并重新安装新组件。
renderField
您需要将其提升:
const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => ( <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}> <label for={label} className="sr-only">{label}</label> <input {...input} placeholder={label} type={type} className="form-control" /> <div class="text-danger"> {touched ? error: ''} </div> </div> ); class SignIn extends Component { ... render() { const { message, handleSubmit, prestine, reset, submitting } = this.props; return ( <div className="row"> <div className="col-md-4 col-md-offset-4"> <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} className="form-signin"> <h2 className="form-signin-heading"> Please sign in </h2> {this.renderAlert()} <Field name="email" type="text" component={renderField} label="Email Address" /> <Field name="password" type="password" component={renderField} label="Password" /> <button action="submit" className="btn btn-lg btn-primary btn-block">Sign In</button> </form> </div> </div> ); } } ...