最大调用堆栈超出错误

时间:2017-05-11 03:46:13

标签: reactjs

错误指向getValidationState()和complete(),但我还没有找到源代码。我正在尝试进行一个输入,其验证状态会根据用户指定的输入长度而变化。

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';

class FormGroupValidation extends Component {

constructor(props) {
    super(props);
    this.state = {
        value: '',
        completed: false
    };

    this.getValidationState = this.getValidationState.bind(this);
    this.complete = this.getValidationState.bind(this);
    this.unComplete = this.unComplete.bind(this);
    this.toggleComplete = this.toggleComplete.bind(this);
    this.handleChange = this.handleChange.bind(this);
}
getValidationState() {
    const length = this.state.value.length;

    if (this.ThresholdType === 'max') {
        if (this.props.errorLen && length <= this.props.errorLen) {
            return 'error';
        } else if (this.props.warnLen && length <= this.props.warnLen) {
            this.unComplete();
            return 'warning';
        } else if (this.props.successLen && length <= this.props.successLen) {
            this.complete();
            return 'success';
        }
    } else {
        if (this.props.successLen && length >= this.props.successLen) {
            this.complete();
            return 'success';
        } else if (this.props.warnLen && length >= this.props.warnLen) {
            return 'warning';
        } else if (this.props.errorLen && length >= this.props.errorLen) {
            this.unComplete();
            return 'error';
        }
    }
}
complete() {
    if (!this.state.complete) this.toggleComplete(); 
}
unComplete() {
    if (this.state.complete) this.toggleComplete();
}
toggleComplete() {
    this.setState({completed: !this.state.completed});
}
handleChange(e) {
    this.setState({ value: e.target.value });
}
render() {
    return (
    <form>
        <FormGroup
          controlId="formBasicText"
          validationState={this.getValidationState()}
        >
          <ControlLabel>Working example with validation</ControlLabel>
          <FormControl
            type="text"
            value={this.state.value}
            placeholder="Enter text"
            onChange={this.handleChange}
          />
          <FormControl.Feedback />
          <HelpBlock>Validation is based on string length. </HelpBlock>
        </FormGroup>
    </form>
    );
}
}

export default FormGroupValidation;

1 个答案:

答案 0 :(得分:2)

this.complete = this.getValidationState.bind(this);

应该是

this.complete = this.complete.bind(this);