js中什么是自定义react数据验证组件（详细说明）

更多使用方法可以查看github上的说明文档和示例。

但是，如果我们前端使用的是React框架，如何来实现和上面knockout类似的功能呢？我们可以考虑将这一相对独立的功能抽出来，写成一个React组件。看下面的代码：

class ValidationInputs extends React.Component {
  constructor(props) {
    super(props);    this.state = {
      isValid: true,
      required: this.props.required,
      number: this.props.number,
      min: this.props.min,
      max: this.props.max,
      money: this.props.money,
      data: null,
      errors: ""
    }
  }

  componentWillReceiveProps(nextProps) {   
    var that = this;    
    if (this.state.data !== nextProps.data) {      
      return setStateQ({data: nextProps.data}, this).then(function () {        
           return that.handleValidation();
      });
    }
  }

  handleValidation() {    var fields = this.state.data;    // required validation
    if(this.state.required && isNilOrEmpty(fields)){      
        return setStateQ({errors: '必须填写', isValid: false}, this);

    }    
    // number validation
    if (this.state.number) {      
      if (isNaN(fields)) {        
         return setStateQ({errors: '请输入数字', isValid: false}, this);
      }      
      if (!isNilOrEmpty(this.state.min) && !isNaN(this.state.min) && Number(this.state.min) > Number(fields)) {       
        return setStateQ({errors: '输入值必须大于等于' + this.state.min, isValid: false}, this);
      }      
      if (!isNilOrEmpty(this.state.max) && !isNaN(this.state.max) && Number(this.state.max) < Number(fields)) {        
         return setStateQ({errors: '输入值必须小于等于' + this.state.max, isValid: false}, this);
      }
    }    // money validation
    if (this.state.money) {      
         if (fields.length > 0 && !/^\d+(\.\d{1,2})?$/.test(fields)) {        
             return setStateQ({errors: '输入的金额不正确', isValid: false}, this);
         }
    }   
     return setStateQ({errors: '', isValid: true}, this);
  }

  render() {    return <span className="text-danger">{this.state.errors}</span>  }
}
该组件支持的验证项有：
required：true   
关键词：js中啥是自定义react数据验证组件（详细说明）