<div className="item"> <div className="col-xs-4">净车价：</div> <div className="col-xs-7"> <input type="text" className="form-control" placeholder="0" value={this.state.price} onChange={this.changePrice.bind(this)}/> <ValidationInputs ref="validation1" data={this.state.price} required="true" number="true" min="10000" max="99999999" money="true"/> </div> <div className="col-xs-1 text-center">元</div> <div className="clear"></div> </div>
我们将price变量加到父组件的state中，并给input控件绑定onChange事件，以便用户在修改了文本框中的内容时，price变量的值可以实时传入到ValidationInputs组件中。这样，ValidationInputs组件就可以立即通过自己的handleValidation()方法对传入的数据按照预先设定的规则进行验证，并决定是否显示错误信息。
注意，这里我们在引用ValidationInputs组件时，设置了一个ref属性，这是为了方便在父组件中获得ValidationInputs组件的验证结果（成功或失败）。我们可以在父组件中通过下面这个方法来进行判断（假设父组件中引用了多个ValidationInputs组件，并且每个引用都设置了不同的ref值）：
// 父组件调用该方法来判断所有的输入项是否合法 checkInputs() { for (var r in this.refs) { var _ref = this.refs[r]; if (_ref instanceof ValidationInputs) { if (!_ref.state.isValid) return false; } } return true; }
这样，我们在父组件提交数据之前，可以通过这个方法来判断所有的数据项是否都已经通过验证，如果未通过验证，则不提交表单。
其它几个基于React的数据验证组件，不过貌似都是server端使用的：
https://github.com/edwardfhsiao/react-inputs-validation
https://github.com/learnetto/react-form-validation-demo
https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs
总结
以上所述是小编给大家介绍的js中自定义react数据验证组件实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: