webentwicklung-frage-antwort-db.com.de

So machen Sie ein Textfeld in der Material-Benutzeroberfläche ungültig

Ich verwende die TextField-Komponente zum Erfassen der Telefonnummer. Beim Eingeben des Benutzers möchte ich die Eingabe ungültig machen, wenn es sich nicht um eine Zahl handelt oder wenn kein Format folgt und der errorText angezeigt wird. Momentan wird errorText angezeigt, ohne das Feld zu berühren. Wie kann ich dieses Verhalten erreichen?

Jede Hilfe wird sehr geschätzt.

13
Mo3z

Erweitern von Larry answer, setzen Sie errorText auf eine Eigenschaft im Status (errorText im Beispiel unten). Wenn sich der Wert in TextField ändert, überprüfen Sie den Eintrag und legen Sie den Wert der Eigenschaft (errorText) fest, um den Fehler anzuzeigen und auszublenden.

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}
25
Mo3z

Ab 0.20.1 können Sie helperText und error Requisiten

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>
13
Sam

wenn errorText eine leere Zeichenfolge "" ist, wird sie nicht angezeigt. Setzen Sie es also in getInitialState ().

4

Diese Bibliothek kümmert sich um alles, was mit der Validierung von Feldern zusammenhängt, und unterstützt Material-Ui

Um Ihre Felder zu überprüfen, müssen Sie nur Ihre Feldkomponente einpacken. Dadurch sparen Sie sich viel Aufwand bei der Verwaltung des Status manuell.

<Validation group="myGroup1"
    validators={[
            {
             validator: (val) => !validator.isEmpty(val),
             errorMessage: "Cannot be left empty"
            }, ...
        }]}>
            <TextField value={this.state.value}
                       className={styles.inputStyles}
                       style={{width: "100%"}}
                       onChange={
                        (evt)=>{
                          console.log("you have typed: ", evt.target.value);
                        }


     }/>

2
VISHAL DAGA

Arbeitsversion von Material-UI v3.9.3:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { helperText: '', error: false };
  }

  onChange(event) {
    if (event.target.value.length > 2) {
      this.setState({ helperText: '', error: false });
    } else {
      this.setState({ helperText: 'Invalid format', error: true });
    }
  }

  render() {
    return (

                   <TextField
                      helperText={this.state.helperText}
                      onChange={this.onChange.bind(this)}
                      error={this.state.error}
                      required
                      id="outlined-required"
                      label="First Name"
                    />
                     );
  }
1
Ivan Bitkin