node.js - 如何在 React.js 中显示 "email-id already exists"消息？

Question

如何使用 React.js 显示“电子邮件 ID 已存在”消息？

我已经检查了后端的“电子邮件 ID 已存在”条件。但我不明白如何在文本框附近显示该消息。

我尝试在警报中显示该消息。

这是注册表:

    var RegistrationForm = React.createClass({
        //get initial state enent
        getInitialState : function(){
            return {
                strFullName : '',
                strEmail:'',
                strPassword : '',
                Fields : [],
                intPhoneNumber:''
            }
        },
        // submit function
        handleSubmit : function(e){
            e.preventDefault();
            //Validate entire form here
            var validForm = true;
            this.state.Fields.forEach(function(field){
                if (typeof field.isValid === "function") {
                    var validField = field.isValid(field.refs[field.props.name]);
                    console.log("validField "+validField);
                    validForm = validForm && validField;
                }
            });
            console.log("form"+validForm);
            //after validation complete post to server 
            if (validForm) {
                alert("ok");
             //pass data to server   
            axios.post("/register",
              {
                  full_name :this.state.strFullName,
                  email:this.state.strEmail,
                  password:this.state.strPassword,
                  phone_number:this.state.intPhoneNumber,

              }).then(function (response) {
                var data=response.data;
                alert("Email already exist");
              });
            }

             this.setState({
                 strFullName:'',
                 strEmail:'',
                 intPhoneNumber:'',
                 strPassword:''
              })

        },
render : function(){
        //Render form 
        return(
<MyInput type={'email'} 
                value={this.state.strEmail} 
                label={'Email'} 
                name={'Email'} 
                htmlFor={'Email'} 
                isrequired={true}
                onChange={this.onChangeEmail} 
                onComponentMounted={this.register} 
                strMessageRequired={'Please Enter Email.'}
                strMessageEmail={'Please Enter Correct Email'}  />
);
    }
});
module.exports=RegistrationForm;

MyInput 组件用于验证。MyInput.jsx

var React = require('react');
var MyInput = React.createClass({
    //onchange event
    handleChange: function (e) {
        this.props.onChange(e.target.value);
        var isValidField = this.isValid(e.target);
    },
    //validation function
    isValid: function (input) {
if (input.getAttribute('type') == "email" && input.value != "") {
            if (!this.validateEmail(input.value)) {
                input.classList.add('error');
                input.nextSibling.textContent = this.props.strMessageEmail;
                return false;
            }
            else {
                input.classList.remove('error');
                input.nextSibling.textContent = "";
            }
        }
        return true;
    },

Answer 1

 if (validForm) {
           alert("ok");
        var self=this; // put  

  
.
.
.
.
//instead of alert
this.setState({
   error:'Email Already exists'
})

这将渲染父组件，然后渲染 MyInput 组件。然后，您需要将其作为 Prop 传递给子组件。

<MyInput type={'email'} 
                value={this.state.strEmail} 
                label={'Email'} 
                name={'Email'} 
                htmlFor={'Email'} 
                isrequired={true}
                onChange={this.onChangeEmail} 
                onComponentMounted={this.register} 
                strMessageRequired={'Please Enter Email.'}
                strMessageEmail={'Please Enter Correct Email'}  
                error={this.state.error || null} //new addition
/>

这将使用另一个属性(即“error”)渲染 MyInput

现在，在 MyInput 的 render 方法中，您可以像这样处理它:

if(!this.props.error){
   return (<div className="message">{this.props.error}</div>
}

或者如果您想显示介于两者之间的内容，请使用 react 条件渲染。

编辑显示错误

将此行添加到输入框的上方或下方

{this.props.error > 0 &&
        <h2>
          {this.props.error} 
        </h2>
      }