React处理表单输入的几种主要方法

import React, { useState } from 'react';

function ControlledForm() {
  // 1. 使用 useState Hook 定义状态
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  // 2. 通用的处理输入变化的函数
  const handleInputChange = (event) => {
    const { name, value, type, checked } = event.target;
    // 处理复选框等特殊类型
    const inputValue = type === 'checkbox' ? checked : value;
    
    setFormData({
      ...formData, // 展开旧状态
      [name]: inputValue // 用计算属性名动态更新对应字段
    });
  };

  // 3. 处理表单提交
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止默认提交行为
    console.log('提交的数据:', formData);
    // 这里可以发送数据到API等操作
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input
          type="text"
          name="username" // 必须与state中的属性名对应
          value={formData.username}
          onChange={handleInputChange} // 变化时更新state
        />
      </div>
      <div>
        <label>邮箱:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>密码:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>
          记住我:
          <input
            type="checkbox"
            name="rememberMe"
            checked={formData.rememberMe || false} // 处理未定义的情况
            onChange={handleInputChange}
          />
        </label>
      </div>
      <select name="country" value={formData.country} onChange={handleInputChange}>
        <option value="">请选择</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
      </select>
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledForm;

import React, { useRef } from 'react';

function UncontrolledForm() {
  // 1. 使用 useRef Hook 创建ref对象
  const usernameRef = useRef(null);
  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const fileInputRef = useRef(null);

  // 2. 在提交时通过ref获取DOM元素的值
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = {
      username: usernameRef.current.value,
      email: emailRef.current.value,
      password: passwordRef.current.value,
      // 文件输入尤其适合用非受控组件
      avatar: fileInputRef.current.files[0] 
    };
    console.log('提交的数据:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input
          type="text"
          name="username"
          defaultValue="默认值" // 使用 defaultValue 设置初始值，而非 value
          ref={usernameRef} // 将ref关联到输入框
        />
      </div>
      <div>
        <label>邮箱:</label>
        <input
          type="email"
          name="email"
          ref={emailRef}
        />
      </div>
      <div>
        <label>密码:</label>
        <input
          type="password"
          name="password"
          ref={passwordRef}
        />
      </div>
      <div>
        <label>上传头像:</label>
        <input
          type="file"
          ref={fileInputRef}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default UncontrolledForm;

// useForm.js
import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value, type, checked } = event.target;
    setValues({
      ...values,
      [name]: type === 'checkbox' ? checked : value
    });
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  // 返回状态和操作方法，供组件使用
  return [values, handleChange, resetForm];
}

export default useForm;

// MyForm.js
import React from 'react';
import useForm from './useForm';

function MyForm() {
  const [formData, handleChange, resetForm] = useForm({
    username: '',
    email: ''
  });

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">提交</button>
      <button type="button" onClick={resetForm}>重置</button>
    </form>
  );
}

npm install formik

import React from 'react';
import { useFormik } from 'formik';
// 通常配合Yup进行验证
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('无效的邮箱地址').required('必填'),
  password: Yup.string().min(6, '密码至少6位').required('必填'),
});

function FormikForm() {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="email">邮箱</label>
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {/* 显示错误信息 */}
        {formik.touched.email && formik.errors.email ? (
          <div style={{ color: 'red' }}>{formik.errors.email}</div>
        ) : null}
      </div>

      <div>
        <label htmlFor="password">密码</label>
        <input
          id="password"
          name="password"
          type="password"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.password}
        />
        {formik.touched.password && formik.errors.password ? (
          <div style={{ color: 'red' }}>{formik.errors.password}</div>
        ) : null}
      </div>

      <button type="submit">提交</button>
    </form>
  );
}

export default FormikForm;