import React, { useState } from 'react';

function ControlledForm() {
  // 1. 使用 useState Hook 定義狀態(tài)
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  // 2. 通用的處理輸入變化的函數(shù)
  const handleInputChange = (event) => {
    const { name, value, type, checked } = event.target;
    // 處理復(fù)選框等特殊類型
    const inputValue = type === 'checkbox' ? checked : value;
    
    setFormData({
      ...formData, // 展開舊狀態(tài)
      [name]: inputValue // 用計(jì)算屬性名動(dòng)態(tài)更新對(duì)應(yīng)字段
    });
  };

  // 3. 處理表單提交
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止默認(rèn)提交行為
    console.log('提交的數(shù)據(jù):', formData);
    // 這里可以發(fā)送數(shù)據(jù)到API等操作
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用戶名:</label>
        <input
          type="text"
          name="username" // 必須與state中的屬性名對(duì)應(yīng)
          value={formData.username}
          onChange={handleInputChange} // 變化時(shí)更新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="">請(qǐng)選擇</option>
        <option value="china">中國(guó)</option>
        <option value="usa">美國(guó)</option>
      </select>
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledForm;

import React, { useRef } from 'react';

function UncontrolledForm() {
  // 1. 使用 useRef Hook 創(chuàng)建ref對(duì)象
  const usernameRef = useRef(null);
  const emailRef = useRef(null);
  const passwordRef = useRef(null);
  const fileInputRef = useRef(null);

  // 2. 在提交時(shí)通過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('提交的數(shù)據(jù):', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用戶名:</label>
        <input
          type="text"
          name="username"
          defaultValue="默認(rèn)值" // 使用 defaultValue 設(shè)置初始值，而非 value
          ref={usernameRef} // 將ref關(guān)聯(lián)到輸入框
        />
      </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);
  };

  // 返回狀態(tài)和操作方法，供組件使用
  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進(jìn)行驗(yàn)證
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}
        />
        {/* 顯示錯(cuò)誤信息 */}
        {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;