React.js-表单输入验证

您应该避免使用refs，可以使用

onChange

每次更改时，请更新已更改字段的状态。

然后，您可以轻松地检查该字段是否为空或您想要的其他内容。

您可以执行以下操作：

class Test extends React.Component {    constructor(props){       super(props);       this.state = {fields: {},errors: {}       }    }    handlevalidation(){        let fields = this.state.fields;        let errors = {};        let formIsValid = true;        //Name        if(!fields["name"]){formIsValid = false;errors["name"] = "Cannot be empty";        }        if(typeof fields["name"] !== "undefined"){if(!fields["name"].match(/^[a-zA-Z]+$/)){   formIsValid = false;   errors["name"] = "only letters";}     }        //Email        if(!fields["email"]){formIsValid = false;errors["email"] = "Cannot be empty";        }        if(typeof fields["email"] !== "undefined"){let lastAtPos = fields["email"].lastIndexOf('@');let lastDotPos = fields["email"].lastIndexOf('.');if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {   formIsValid = false;   errors["email"] = "Email is not valid"; }       }       this.setState({errors: errors});       return formIsValid;   }   contactSubmit(e){        e.preventDefault();        if(this.handlevalidation()){alert("Form submitted");        }else{alert("Form has errors.")        }    }    handleChange(field, e){      let fields = this.state.fields;        fields[field] = e.target.value;     this.setState({fields});    }    render(){        return ( <div>    <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}>         <div className="col-md-6"><fieldset>     <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/>     <span style={{color: "red"}}>{this.state.errors["name"]}</span>    <br/>   <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/>   <span style={{color: "red"}}>{this.state.errors["email"]}</span>   <br/>   <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/>   <br/>   <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/>   <br/>          </fieldset>       </div>   </form> </div>      )    }}React.render(<Test />, document.getElementById('container'));

在此示例中，我仅对电子邮件和姓名进行了验证，但是您知道如何进行验证。其余的你可以自己做。

也许有更好的方法，但是您会明白的。

这是小提琴。

希望这可以帮助。