Question

我正在尝试创建一个登录表单。但是，在聚焦输入字段时，整个页面都会闪烁。下面是渲染代码，

render() {
    return (
        <div>
            <div className="row">
                <div className="col-md-8 login-image"/>
                <div className="col-md-4">
                    <div className="login-form">
                        <h2 className="mb-5">Form login</h2>
                        <form>
                            <p className="h5 text-center mb-4">Sign in</p>
                            <Input label="Email"
                                   icon="envelope-open" group type="email"
                                   validate error="wrong"
                                   success="right"/>
                            <Input label="Password" icon="lock" group
                                    type="password" validate/>
                            <div className="text-center">
                                <Button>Login</Button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    );
};

CSS代码

 .login-image {
background: url("../../resources/coming-soon2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;

}

.login-form {
min-height: 100%;
min-height: 100vh;
padding: 50px;

}

我按预期获得了以下输出，但textfield整个网页的onFocus开始闪烁。它只发生在chrome上 login

Answer 1

您是否尝试添加onBlur事件？我已经复制了你的代码，添加了onBlur事件并且它工作正常，没有闪烁。

输入字段闪烁React MDbootstrap

1 个答案: