react-redux-form-我键入的每个字符后表单元素都失去焦点

Question

我使用“ react-redux-form”中的“表单和控制组件”创建了一个表单。我还在我的Combinereducer函数中使用createForms来维护Redux存储中的表单状态。但是每次键入一个字符后，我都会失去注意力。

代码：

import React, {Component} from 'react';
import {Form, Errors, Control,actions} from 'react-redux-form';

.... different validator functions

class Login extends Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (values) => {
        console.log (JSON.stringify(values));
        alert (JSON.stringify(values));
        this.props.resetLoginForm();
    }

    render() {
        return(
            <div className="jumbotron">
                    <div className="row">
                        <div className="col-12 d-flex justify-content-center">
                            <span className="h1"><strong className="text-uppercase">LOGIN</strong></span>
                        </div>
                    </div>

                            <Form model="login" className="col-md-6" onSubmit={((values) => this.handleSubmit(values))}>
                                <div className="form-group row">
                                    <label htmlFor="email" className="col-md-2 text-right">Email</label>
                                    <div className="col-md-10">
                                    <Control.text model=".email" className="form-control" id="email" name="email" placeholder="Email" validators={{required,validEmail}}/>
                                    <Errors className="text-danger" model=".email" show="touched" messages = {{
                                        required : "Email is mandatory to Login ",
                                        validEmail : "Invalid Email Format "
                                    }} />
                                    </div>
                                </div>
                                <div className="form-group row">
                                    <label htmlFor="password" className="col-md-2 text-right">Password</label>
                                    <div className="col-md-10">
                                    <Control type="password" model=".password" className="form-control" id="password" name="password" placeholder="Password" validators={{required, minLength:minLength(6),maxLength:maxLength(15)}}/>
                                    <Errors className = "text-danger" model=".password" show="touched" messages ={{
                                        required : "Password Mandatory ",
                                        minLength : "Minimum Length must be greater than 6 characters ",
                                        maxLength : "Maximum Lenth must be 15 characters or less "
                                    }}/>
                                    <div className = "mt-3"><button type="submit" className="btn btn-primary" >Login</button></div>
                                    </div>
                                </div>   
                            </Form>
                        </div>
        );
    }
}
export default Login; 

-- Combine Reducer function --

...various imports..
export const configureStore = () => {
    const store = createStore (
        combineReducers({
            //login : login,
            registerUser : registerUser,
            addBusiness : addBusiness,
            ...createForms({
                login : InitialLogin
            })
        }),
        applyMiddleware(thunk,logger)
    );
    return store;