html – 使用onBlur与JSX和React

概述我正在尝试创建密码确认功能,只有在用户离开确认字段后才会显示错误.我正在与Facebook的React JS合作.这是我的输入组件： <input type="password" placeholder="Password (confirm)" valueLink={this.linkState('password2')} onBlur={this.renderPa 我正在尝试创建密码确认功能,只有在用户离开确认字段后才会显示错误.我正在与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;},

总结

以上是内存溢出为你收集整理的html – 使用onBlur与JSX和React全部内容，希望文章能够帮你解决html – 使用onBlur与JSX和React所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。