Чтобы написать подтверждение для электронной почты в Reactjs

Question

У меня есть компонент TextField для ввода электронной почты.

<div className="form-group" style={styles.popupContainer}>
  <label>
    <IntlMessages id="DIC_SETTINGS_CLIENT_PIC_EMAIL" />
  </label>
  <label className="text-danger" style={styles.star_style}>
    <sup>{"*"}</sup>
  </label>
  <TextField
    error={errorInputs.email}
    margin="normal"
    fullWidth
    id={"email"}
    value={item.email}
    onChange={this.handleEmailChange("email")}
    onBlur={() => this.handleBlur("email")}
  />
</div>;

onChange()

handleEmailChange = email => event => {
        let changedEmailValue = event.target.value;

        switch (email) {
            case "email":
                let temp = this.state.item;
                temp.email = changedEmailValue;
                this.setState({
                    item: temp
                });
                break;
        }
    };

Как написать код для проверки электронной почты в этом контексте

Answer 1

Вы можете легко проверить свой адрес электронной почты, протестировав event.target.value с выражением Regex. Вот пример реализации вашего кода.

Вот живая песочница. Протестируйте, щелкнув вкладку консоли и введя действительный адрес электронной почты в поле ввода.

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);
  if (isValidEmail) {
    this.setState({
      item: event.target.value,
    });
  } else {
    console.log("It's not a valid email");
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;

Обновление: реализовано с помощью Switch

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);

  switch (event.target.id) {
    case "email":
     isValidEmail
          ? this.setState({ item: event.target.value })
          : this.setState({ item: "" });
      break;
    default:
      break;
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;