Wie validate-state mit react-bootstrap verwenden

Question

Ich benutze react-bootstrap und ich versuche, ein Formular mit der Option validate-state zu validieren. Ich kann nicht herausfinden, wie man getValidationState() zu return error verwendet, wenn ich ein Formular absende, das das Eingabefeld rot drehen würde. Momentan, wenn das Formular geladen wird, erhalte ich eine Fehlermeldung in der Konsole ProfileCandidateForm.getValidationState ReferenceError: error is not defined.

Wenn ich getValidationState() entferne, kann ich das Formular abschicken, und wenn es einen Fehler gibt, wird der Fehler in einer Alarmbox angezeigt. Ich möchte dies im Bootstrap auf validate-state ändern.

Jede Hilfe wird geschätzt. Immer noch meinen Kopf um React wickelnd.

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

Sie müssen den Wert (Zustand) des Textfeldes in der getValidationState() Funktion verweisen. Geben Sie dann null (für keine sichtbare Validierung), "Erfolg" (für die grüne sichtbare Validierung) oder "Fehler" (für die rote Validierung) zurück.

Hier ist eine meiner getValidationState-Funktionen.

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