Wie Sie ein TextField in der Material-UI ungültig machen

Question

Ich verwende TextField-Komponente, um die Telefonnummer zu erfassen. Während der Benutzer schreibt, möchte ich den Eintrag ungültig machen, wenn es sich nicht um eine Zahl handelt oder wenn er keinem Format folgt und den errorText anzeigt. Derzeit wird errorText angezeigt, auch ohne das Feld zu berühren. Wie kann ich dieses Verhalten erreichen?

Jede Hilfe wird sehr geschätzt.

Answer 1

Erweitern Larry Antwort, setze errorText auf eine Eigenschaft in state (errorText im folgenden Beispiel). Wenn sich der Wert in TextField ändert, validieren 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)} 
     /> 
    ) 
    } 
} 

Answer 2

Wenn errorText eine leere Zeichenfolge "" ist, wird es nicht angezeigt. Also, setze es auf getInitialState().

Answer 3

Diese library kümmert sich um alles zu validieren Feldern und unterstützt Material-ui

Ihre Felder zu validieren, müssen Sie nur Ihre Feldkomponente wickeln müssen ... viel Mühe spart bei der Verwaltung Melde dich manuell an.

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


    }/>