React-创建带有警报和setInterval的表单

Question

我正在尝试对React进行以下练习。这是一个基本练习（我正在学习），但是我不知道从哪里开始，也不知道如何检查电子邮件和密码。我真的很感谢您的帮助。预先感谢！

创建一个获取电子邮件和密码的表单，以及一个最初不可见的带有警报的组件。提交时，应检查一系列用户是否存在电子邮件，如果存在，则对应的密码是否正确。

如果电子邮件和密码正确，则您应该显示带有绿色背景的肯定消息，否则为否定消息和红色背景，但在两种情况下，都会显示一系列消息：

This message will disappear in 3
This message will disappear in 2
This message will disappear in 1
This message will disappear in 0

并再次使警报组件不可见，即，将其卸下。

使用setInterval显示每条消息1秒钟

Answer 1

您可以使用组件状态来实现它。

const SomeComponent = ({}) => {
  const [email, setEmail] = '';
  const [password, setPassword] = '';
  return (
    <div>
      <input onChange={(e) => setEmail(e.target.value)} />
    </div>
  )
}

与密码字段相同，并使用setInterval更改状态然后显示。