React 表单组件构建指南

React 表单组件构建指南

在 React 中构建表单需要细致的状态管理。本指南将向你展示如何从零开始构建一个注册表单。

你将学习四个核心概念：

• 状态管理 将所有表单字段存储在一个状态对象中。使用 useState hook 来追踪姓名、年龄、电子邮件和密码。

• 处理输入 使用一个函数来管理所有的输入变更。通过展开旧数据并根据输入名称添加新值来更新状态。

• 表单验证 在提交之前检查所有字段是否都包含数据。如果任何字段为空，则显示警告。

• 键盘支持 为 Enter 键添加监听器。这允许用户无需点击按钮即可提交表单。

代码示例：

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  function getdata(e) {
    const { name, value } = e.target;
    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;
    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully");
    } else {
      alert("Please fill all fields");
    }
  }

  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

来源：https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh