reactjs - 如何将 validate-state 与 React-bootstrap 一起使用

Question

我正在使用 react-bootstrap 并尝试使用 validate-state 选项来验证表单。当我提交会使输入字段变成红色的表单时，我不知道如何使用 getValidationState() 来返回错误。目前，当表单加载时，我在控制台中收到一条错误消息ProfileCandidateForm.getValidationState ReferenceError:错误未定义。

如果我删除 getValidationState() 我可以提交表单，如果出现错误，则会将错误返回到警报框。我想将其更改为 Bootstrap 中的 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,
  }

Answer 1

您需要在 getValidationState() 函数中引用文本字段的值(状态)。然后返回 null(对于没有可见验证)、“成功”(对于绿色可见验证)或“错误”(对于红色验证)。

这是我的 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';
    }
}