如果用户输入的输入不是使用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
   );

}

我想确保我对输入进行了基本的电子邮件验证，并且只能输入数字''。

有人可以帮我解决这个问题吗？提前致谢。

编辑：

错误不必要的转义字符的图像

Answer 1

您可以使用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

Answer 2

有多种方法可以做到这一点，但我建议在初始化为 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>
    </>
  );
}

这是codesandbox中的工作原型