Question

我正在使用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,
  }

Answer 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';
    }
}

如何在react-bootstrap中使用validate-state

1 个答案: