react中如何使用form标签

使用 form 标签的基本方法

在 React 中，<form> 标签的使用方式与 HTML 类似，但需要结合 React 的状态管理机制。通过 onSubmit 事件处理表单提交，并使用 useState 钩子管理表单数据。

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

使用受控组件

表单元素（如 input、textarea、select）的值由 React 状态控制，称为受控组件。每次输入变化时，通过 onChange 事件更新状态。

const [email, setEmail] = useState('');

const handleEmailChange = (e) => {
  setEmail(e.target.value);
};

return (
  <form>
    <input
      type="email"
      value={email}
      onChange={handleEmailChange}
    />
  </form>
);

处理多字段表单

对于包含多个字段的表单，可以使用动态名称属性（name）统一管理状态，减少重复代码。

const [formData, setFormData] = useState({
  firstName: '',
  lastName: '',
  age: ''
});

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({
    ...prev,
    [name]: value
  }));
};

return (
  <form>
    <input
      name="firstName"
      value={formData.firstName}
      onChange={handleInputChange}
    />
    <input
      name="lastName"
      value={formData.lastName}
      onChange={handleInputChange}
    />
  </form>
);

表单验证

在提交前或输入时进行验证，确保数据符合要求。可以通过状态或第三方库（如 yup、formik）实现。

const [errors, setErrors] = useState({});

const validateForm = () => {
  const newErrors = {};
  if (!formData.username) newErrors.username = 'Username is required';
  if (formData.password.length < 6) newErrors.password = 'Password too short';
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (validateForm()) {
    console.log('Form is valid');
  }
};

使用 Formik 简化表单

Formik 是流行的 React 表单库，可减少样板代码，内置验证和提交处理。

import { Formik, Field, Form } from 'formik';

function FormikExample() {
  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field type="email" name="email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}