我正在尝试创建一个登录表单。但是在聚焦输入字段时,整个页面会闪烁。下面是渲染代码,
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
登录时发生