ReactJS - использование onBlur для проверки поля электронной почты - PullRequest
Новая
       24

ReactJS - использование onBlur для проверки поля электронной почты

0 голосов
/ 11 декабря 2018

У меня есть текстовое поле MaterialUI для электронной почты, которое проверяет ввод, когда пользователь покидает поле.Для этой цели я использую функцию onBlur.Я хочу показать сообщение об ошибке, используя helpertext.

Код поля электронной почты: 

<TextField
    margin="dense"
    id="emailAddress"
    name="email"
    label="email"
    type="email"
    onChange={onChange}
    onBlur={validateEmail}
    value={email}
    error={validEmail}
    helperText={validEmail ? 'Please enter a valid Email' : ' '}
    fullWidth
 />

Переменная validEmail инициализируется внутри функционального компонента следующим образом: 

let validEmail = false;

И validateEmail определяется внутри того же компонентаas: 

const validateEmail = () => {
    if (!email || invalidEmail(email)) {
      validEmail = true;
    } else {
      validEmail = false;
    }
};

Но это не работает и сообщение об ошибке не отображается.Чего мне здесь не хватает?Условие, которое проверяет invalidEmail, действительно выполняется.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Я думаю, что правильный способ сделать это - использовать внутреннее состояние компонента: 

class EmailComponent extends React.Component {
  state = {
    validEmail: false,
    email: '',
  };

  onChange = (e) => {
    ...
    this.setState({
      email: e.target.value
    });
  }

  validateEmail = (e) => {
    const email = e.target.value;
    if (!email || invalidEmail(email)) {
      this.setState({
        validEmail: true,
      });
    } else {
      this.setState({
        validEmail: false,
      });
    }
  }

  render () {
    const { validEmail, email } = this.state;

    return (
      <TextField
        margin="dense"
        id="emailAddress"
        name="email"
        label="email"
        type="email"
        onChange={this.onChange}
        onBlur={this.validateEmail}
        value={email} //I think you should also set email as a state
        error={validEmail}
        helperText={validEmail ? 'Please enter a valid Email' : ' '}
        fullWidth
      />
    );
  }
}

Изменение значения переменной внутри компонента без состояния не позволит вам достичь того, чего вы хотите, так какКомпонент не будет отображаться снова, пока не будет изменен один из реквизитов или состояние.

Редактировать: использовать родительский компонент, где вы обрабатываете состояние 

class ParentComponent extends React.Component {
  state = {
    validEmail: false,
    email: '',
  };

  onChange = (e) => {
    this.setState({
      email: e.target.value
    });
  }

  validateEmail = (e) => {
    const email = e.target.value;
    if (!email || invalidEmail(email)) {
      this.setState({
        validEmail: true,
      });
    } else {
      this.setState({
        validEmail: false,
      });
    }
  }

  render () {
    const { validEmail, email } = this.state;

    return (
      <ChildComponent 
        email={email}
        validEmail={validEmail}
        onChange={this.onChange}
        validateEmail={this.validateEmail}
      />
    );
  }
}

const ChildComponent = (props) => (
  <TextField
    margin="dense"
    id="emailAddress"
    name="email"
    label="email"
    type="email"
    onChange={props.onChange}
    onBlur={props.validateEmail}
    value={props.email}
    error={props.validEmail}
    helperText={props.validEmail ? 'Please enter a valid Email' : ' '}
    fullWidth
  />
);
0 голосов
/ 11 декабря 2018

Когда invalidEmail(email) возвращает true, вы назначаете true на validEmail.Вы уверены, что это не логическая ошибка?

...