如何使用 validate-state 和 react-bootstrap答案

【问题标题】：How to use validate-state with react-bootstrap如何使用 validate-state 和 react-bootstrap
【发布时间】：2017-09-30 17:21:30
【问题描述】：

我正在使用react-bootstrap，我正在尝试使用validate-state 选项验证表单。当我提交将输入字段变为红色的表单时，我无法弄清楚如何使用getValidationState() 到return error。目前，当表单加载时，我在控制台 ProfileCandidateForm.getValidationState ReferenceError: error is not defined 中收到一条错误消息。

如果我删除getValidationState()，我可以提交表单，如果出错，则将错误返回到警告框。我想在引导程序中将其更改为validate-state。

感谢任何帮助。仍然围绕着 React。

export default class ProfileCandidateForm extends Component {
  constructor(props) {
    super(props);

    var profileCandidate = this.props.profileCandidate;
    var firstName = profileCandidate && profileCandidate.name && profileCandidate.name.first;


    this.state = {
      firstName: firstName || "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    var profileCandidate = this.state;

    insertProfileCandidate.call({profileCandidate}, (error) => {
      if (error) {
        alert(error.reason);
      }
    });
  }

  getValidationState() {
    if (error) return 'error';
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <FormGroup
          validationState={this.getValidationState()}
          >
            <FormControl
              type="text"
              name="firstName"
              value={this.state.firstName}
              placeholder="First name"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
          </FormGroup>
          <FormGroup >
            <Button type="submit">
              Save
            </Button>
          </FormGroup>
        </form>
      )
    }
  }

  ProfileCandidateForm.propTypes = {
    profileCandidate: PropTypes.object.isRequired,
  }

【问题讨论】：

标签： reactjs meteor react-bootstrap

【解决方案1】：

您需要在 getValidationState() 函数中引用文本字段的值（状态）。然后返回 null（不可见验证）、'success'（绿色可见验证）或 'error'（红色验证）。

这是我的 getValidationState 函数之一。

getValidationState() {
    var value = this.state.value;

    if (value===null || value==='') { return null; }

    var valid = this._getValidity(value)
    if (valid===true) {
      return 'success';
    } else {
      return 'error';
    }
}

【讨论】：