Ich versuche jedes Eingabefeld zu validieren. Angenommen, ich habe 5 Eingabefelder, wie setze ich den Fehlerstatus für jedes Eingabefeld? Beispiel: this.setState ({error ['roleShortName']: true}). Dies funktioniert nicht und bei der Eingabe ist ungültig = {this.state.error ["roleShortName"]}.

<FormGroup row>
      <Label for="roleshortname" sm={4}>roleshortname</Label>
            <Col sm={8}>
                 <Input invalid={this.state.error}
                      autoComplete='off'
                      onChange={this.handleChange}
                      type="text"
                      value={this.state.roleShortName}
                      name="roleShortName"
                      />
             </Col>
</FormGroup>

<FormGroup row>
     <Label for="rolefullname" sm={4}>rolefullname</Label>
            <Col sm={8}>
                  <Input invalid={this.state.error}
                   autoComplete='off'
                   onChange={this.handleChange}
                   type="text"
                   value={this.state.roleName}
                   name="roleName"
              </Col>
</FormGroup>
<Button onClick={() => this.handleAddConfirm()}
handleAddConfirm() {

        if (!this.state.roleShortName) {
            this.setState({ error: true })
            return
        }
        else if (!this.state.roleName) {
            this.setState({error: true})
            return
        }
0
Alvin Mathis 24 Feb. 2020 im 10:05

3 Antworten

Beste Antwort

this.setState({error['roleShortName']: true}) funktioniert nicht. Wenn Sie möchten, dass der Schlüssel dynamisch ist, sollte er folgendermaßen aussehen:

this.setState({[error['roleShortName']]: true})

Beachten Sie das [], das den Schlüsselnamen umgibt.

Bearbeiten : Ich denke, Sie suchen nach einem Wörterbuch, das für jede Eingabe einen Fehler enthält:

handleAddConfirm() {
        var newErrors = {...this.state.errors}
        if (!this.state.roleShortName) {
            newErrors["roleShortName"] = true
        }
        else if (!this.state.roleName) {
            newErrors["roleName"] = true
        }
        this.setState({ errors: newErrors })
        return
}

In Ihrem Konstruktor sollten Sie haben

this.state = {errors: {}}
1
AdamGold 24 Feb. 2020 im 07:47

Hier ist etwas Allgemeines, vorausgesetzt, Ihr Eingabefeld hat ein Namensattribut.

Sie nehmen den Namen aus vorzugsweise Unschärfe event und setzen den Fehlerwert darauf.

[e.target.name] = [e.target.value]

In Ihrem Fall legen Sie im Fehlerobjekt einfach die Namenseigenschaft und den Wert wie folgt fest

// check for error on `e.target.name` field and if true

this.setState({ error[e.target.name]: true } )
0
kushalvm 24 Feb. 2020 im 07:27

Initialisieren Sie ein Objekt im Konstruktor, das den Fehlerstatus jedes Eingabefelds enthält.

constructor(props) {
 super(props);
 this.state = {
   errorFields: {}
 }
}

<Input invalid={this.state.errorFields.roleShortName}
       autoComplete='off'
       onChange={this.handleChange}
       type="text"
       value={this.state.roleShortName}
       name="roleShortName"
/>

    handleChange(e) {
      const { name, value } = e.target;
      let errorFields = this.state.errorFields;
      errorFields[name] = false;
      if (!value) {
        errorFields[name] = true;    
      }
      this.setState({
       errorFields,
       [name]: value
      });
    }

Dann in der handleAddConfirm-Funktion.

handleAddConfirm(e) {
   let indexOfInvalidState Object.values(this.state.errorFields).indexOf(true);
   if (indexOfInvalidState > -1) {
      return false;
   }
}
0
kuns 24 Feb. 2020 im 08:26