Как аннулировать интерфейс TextField в материале

Я использую компонент TextField для записи номера телефона. Когда пользователь печатает, я хочу аннулировать запись, если она не является номером, или если она не соответствует формату и отображает errorText. В настоящее время errorText отображается, даже не касаясь поля. Как я могу достичь такого поведения?

Любая помощь очень ценится.

Ответы

Ответ 1

Расширение Larry answer, установите errorText в свойство в состоянии (errorText в приведенном ниже примере). Когда значение в TextField изменяется, проверьте запись и установите значение свойства (errorText), чтобы отобразить и скрыть ошибку.

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

Ответ 2

Начиная с версии 0.20.1 вы можете использовать helperText и сообщения error

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

Ответ 3

если errorText - это пустая строка "", то она не будет отображаться. Итак, установите его в getInitialState().

Ответ 4

Эта библиотека заботится обо всем, что связано с проверкой полей, и поддерживает файл-ui

Чтобы проверить свои поля, вам просто нужно обернуть свой компонент поля... экономя при этом много усилий в управлении состоянием вручную.

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


     }/>

Ответ 5

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