我正在尝试创建一个密码确认功能,仅在用户离开确认字段后才呈现错误。我正在使用 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
并使用返回值,该值为空。
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;
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)