- 首页
- 其他开发
- 使用 redux-form 我在输入第一个字符后失去焦点
使用 redux-form 我在输入第一个字符后失去焦点
[英] Using redux-form I'm losing focus after typing the first character
本文介绍了使用 redux-form 我在输入第一个字符后失去焦点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 redux-form 和模糊验证.在输入元素中输入第一个字符后，它失去焦点，我必须再次单击它才能继续输入.它只对第一个字符执行此操作.后续字符类型仍然是焦点.这是我的基本登录表单示例:
import React, { Component } from 'react';从'react-redux'导入{连接}；import { Field, reduxForm } from 'redux-form';从'../actions/authActions'导入*作为动作；require('../../styles/signin.scss');类登录扩展组件{handleFormSubmit({ email, password }) {this.props.signinUser({ email, password }, this.props.location);}渲染警报(){如果(this.props.errorMessage){返回 (<div className="alert alert-danger">{this.props.errorMessage}
);} else if (this.props.location.query.error) {返回 (<div className="alert alert-danger">需要授权！
);}}使成为() {const { 消息，handleSubmit，prestine，重置，提交 } = this.props;const renderField = ({ input, label, type, meta: { touch, invalid, error } }) =>(<div class={`form-group ${touched &&无效的 ?'有错误':''}`}><label for={label} className="sr-only">{label}</label><input {...input} placeholder={label} type={type} className="form-control"/><div class="text-danger">{感动?错误: ''}
);返回 (<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">请登录{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">登录</button></表单>
);}}功能验证(值){常量错误 = {};如果(！values.email){errors.email = '输入用户名';}如果(！值.密码){errors.password = '输入密码'}返回错误；}函数 mapStateToProps(state) {返回 { errorMessage: state.auth.error }}登录 = reduxForm({形式:'登录'，验证:验证})(登入);导出默认连接(mapStateToProps，动作)(登录)；
解决方案
发生这种情况是因为您每次渲染时都将 renderField 重新定义为一个新组件，这意味着它看起来像一个 new 组件到 React 这样它会卸载原始组件并重新安装新组件.
你需要把它举起来:
const renderField = ({ input, label, type, meta: { touch, invalid, error } }) =>(<div class={`form-group ${touched &&无效的 ?'有错误':''}`}><label for={label} className="sr-only">{label}</label><input {...input} placeholder={label} type={type} className="form-control"/><div class="text-danger">{感动?错误: ''});类登录扩展组件{...使成为() {const { 消息，handleSubmit，prestine，重置，提交 } = this.props;返回 (<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">请登录{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">登录</button></表单>
);}}...
I'm using redux-form and on blur validation. After I type the first character into an input element, it loses focus and I have to click in it again to continue typing. It only does this with the first character. Subsequent characters types remains focuses. Here's my basic sign in form example:
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);
解决方案
This happens because you're re-defining renderField as a new component every time you render which means it looks like a new component to React so it'll unmount the original one and re-mounts the new one.
You'll need to hoist it up:
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>
);
}
}
...
这篇关于使用 redux-form 我在输入第一个字符后失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
