Как отключить кнопку, если введенный пользователем ввод не является допустимым адресом электронной почты с использованием javascript и реагирует?

Question

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

ниже вы можете увидеть мой код,

function Parent() {
    const [email, setEmail] = useState('');
    const onEmailChange = (event: any) => {
        setEmail(event.target.value);
    };

   const isDisabled = email.length === 0;

    return (
         <Input
             type="email"
             value={email}
             onChange={onEmailChange}
             placeholder="Insert user email"
         />
         <button disabled={isdisabled}>Add</button> //add button to be disabled when      user input email is wrong
   );

}

Я хочу убедиться, что у меня есть базовая c проверка электронной почты для ввода и я могу вводить только числа, ''.

Может ли кто-нибудь помочь мне с этим? Заранее спасибо.

EDIT:

изображение для ошибки ненужный escape-символ введите описание изображения здесь

Answer 1

Есть несколько способов сделать это, но я бы посоветовал отслеживать отключенное состояние кнопки в ее собственном состоянии, которое инициализируется значением true.

Теперь измените отключенное состояние внутри useEffect , который запускается каждый раз при изменении адреса электронной почты и устанавливает для него значение true или false в зависимости от вашей проверки.

import React from "react";

// Modify this function as per your needs
const validateEmail = email => typeof email === "string" && email.includes("@");

export default function App() {
  const [email, setEmail] = React.useState("");
  const [isDisabled, setIsDisabled] = React.useState(true);

  const onEmailChange = event => {
    setEmail(event.target.value);
  };

  React.useEffect(() => {
    setIsDisabled(!validateEmail(email));
  }, [email]);

  return (
    <>
      <input
        type="text"
        value={email}
        onChange={onEmailChange}
        placeholder="Insert user email"
      />
      <button disabled={isDisabled}>Add</button>
    </>
  );
}

Вот рабочий прототип в codeandbox

Answer 2

Вы можете использовать regex, чтобы проверить, является ли введенное значение электронным письмом, используя свойство onChange().

import React from "react";

const regex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

export default function App() {

  const [isDisabled, setDisibility] = React.useState(true);

  const checkEmail = e => {
    setDisibility(!regex.test(e.target.value));
  }

  return (
    <div>
      <input onChange={checkEmail} placeholder="email address" />
      <button disabled={isDisabled}>add</button>
    </div>
  );
}

https://codesandbox.io/s/dry-sun-votmt?fontsize=14&hidenavigation=1&theme=dark