我正在尝试创建密码确认功能,只有在用户离开确认字段后才会显示错误.我正在与Facebook的React JS合作.这是我的输入组件：
<input
type="password"
placeholder="Password (confirm)"
valueLink={this.linkState('password2')}
onBlur={this.renderPasswordConfirmError()}
/>
这是renderPasswordConfirmError：
renderPasswordConfirmError: function() {
if (this.state.password !== this.state.password2) {
return (
<div>
<label className="error">Please enter the same password again.</label>
</div>
);
}
return null;
},
解决方法
这里有一些问题.
1：onBlur期望回调,并且您调用renderPasswordConfirmError并使用返回值,该值为null.
2：你需要一个地方来呈现错误.
3：你需要一个标志来跟踪“我验证”,你会在模糊时设置为true.如果需要,您可以将焦点设置为false,具体取决于您所期望的行为.
handleBlur: function () {
this.setState({validating: true});
},render: function () {
return <div>
...
<input
type="password"
placeholder="Password (confirm)"
valueLink={this.linkState('password2')}
onBlur={this.handleBlur}
/>
...
{this.renderPasswordConfirmError()}
</div>
},renderPasswordConfirmError: function() {
if (this.state.validating && this.state.password !== this.state.password2) {
return (
<div>
<label className="error">Please enter the same password again.</label>
</div>
);
}
return null;
},