如何在react中创建表单

使用React Hook Form创建表单

React Hook Form是一个流行的轻量级库，用于高效管理表单状态和验证。安装依赖后，通过useForm钩子初始化表单控制。

import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} placeholder="Username" />
      <input {...register("password")} type="password" placeholder="Password" />
      <button type="submit">Submit</button>
    </form>
  );
}

使用Formik与Yup验证

Formik提供表单状态管理，结合Yup可实现声明式验证。定义验证模式后传递给Formik的validationSchema属性。

import { Formik, Field, Form } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email().required(),
  password: Yup.string().min(8).required()
});

function FormikForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="email" type="email" placeholder="Email" />
        <Field name="password" type="password" placeholder="Password" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

原生React受控组件

通过React的useState管理表单数据，每个输入字段绑定value和onChange事件实现双向绑定。

import { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

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

动态表单字段管理

对于需要动态增减的表单字段，使用数组存储字段数据，通过索引控制每个字段的状态。

function DynamicForm() {
  const [fields, setFields] = useState([{ value: '' }]);

  const addField = () => setFields([...fields, { value: '' }]);

  const removeField = (index) => {
    const newFields = [...fields];
    newFields.splice(index, 1);
    setFields(newFields);
  };

  const handleChange = (index, e) => {
    const newFields = [...fields];
    newFields[index].value = e.target.value;
    setFields(newFields);
  };

  return (
    <form>
      {fields.map((field, i) => (
        <div key={i}>
          <input
            value={field.value}
            onChange={(e) => handleChange(i, e)}
          />
          <button type="button" onClick={() => removeField(i)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={addField}>Add Field</button>
    </form>
  );
}

文件上传处理

通过<input type="file">捕获文件，使用FormData对象处理文件上传请求。

function FileUploadForm() {
  const [file, setFile] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    // 替换为实际API端点
    await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="file" 
        onChange={(e) => setFile(e.target.files[0])} 
      />
      <button type="submit">Upload</button>
    </form>
  );
}