Jak unieważnić TextField w Materialnym interfejsie użytkownika

Question

Używam komponentu TextField do przechwytywania numeru telefonu. Gdy użytkownik pisze, chcę unieważnić wpis, jeśli nie jest on liczbą lub jeśli nie jest zgodny z formatem i wyświetla tekst błędu. Obecnie errorText jest wyświetlany nawet bez dotykania pola. Jak mogę osiągnąć to zachowanie?

Każda pomoc jest bardzo doceniana.

Answer 1

Rozszerzanie odpowiedzi Larry, ustawienie errorText do właściwości w stanie (errorText w poniższym przykładzie). Gdy wartość w polu TextField ulegnie zmianie, sprawdź poprawność wpisu i ustaw wartość właściwości (errorText), aby wyświetlić i ukryć błąd.

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

jeśli errorText jest pusty ciąg "", to nie będzie wyświetlany. Tak, ustaw to na to w getInitialState().

Answer 3

Ten library dba o wszystko związane z polami potwierdzanie i wspiera rzeczowo-ui

Aby potwierdzić swoje pola, wystarczy owinąć składową pola ... oszczędzając dużo wysiłku w zarządzaniu wypisz się ręcznie.

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


    }/>