7、React Hooks 实战：从表单验证到状态管理

React Hooks 实战：从表单验证到状态管理

1. 表单验证的实现

在开发应用时，表单验证是必不可少的环节。当我们尝试登录和注册功能时，可能会发现目前没有进行任何验证。对于简单的验证，如必填字段，我们可以直接使用 HTML 特性，它会在字段无效时阻止用户提交表单，并弹出提示框告知用户问题所在。而对于更复杂的验证，比如检查重复密码是否一致，我们需要使用 State Hook 来跟踪表单的错误状态。

1.1 具体操作步骤

1. 编辑 src/user/Login.jsx ：为以下输入字段添加 required 属性。

<input type='text' name='username' id='login-username' required />
<input type='password' name='password' id='login-password' required />

2. 编辑 src/user/Register.jsx ：同样添加 required 属性。

<input type='text' name='username' id='register-username' requ