React表单

受控组件

• 标签 input、textarea、select的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。

不受控组件

• 在受控组件中，表单数据由 React 组件负责处理。另外一个选择是不受控组件，其表单数据由 DOM 元素本身处理。。

import React, { useState } from 'react';

function App() {
  const [selectedFruit, setSelectedFruit] = useState('apple');
  const [checkboxlist, setcheckboxlist] = useState([]);

  // 处理复选框状态变化的函数
  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    const isChecked = event.target.checked;
    // 根据是否选中来更新状态
    if (isChecked) {
      setcheckboxlist([...checkboxlist, value]);
    } else {
      setcheckboxlist(checkboxlist.filter((val) => val !== value));
    }
  };

  const handleSubmit = (e) => {
    // 阻止浏览器重新加载页面
    e.preventDefault();
    // 读取表单数据
    const form = e.target;
    const formData = new FormData(form);
    // 也可以使用普通的对象：
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson);
    // 直接获取表单数据
    const email = formData.get("email");
    console.log(email);
    // 复选框的值
    console.log(checkboxlist)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="text" name="email" />
        <label>
          选择一个水果：
          <select name="fruit" value={selectedFruit} onChange={e => setSelectedFruit(e.target.value)}>
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="tangerine">橘子</option>
          </select>
        </label>
        <label>
          用户名：<input name="username" defaultValue="默认值" />
        </label>
        <hr />
        <label>
          爱好 <label><input type="checkbox" value="sleep"
            checked={checkboxlist.includes('sleep')}
            onChange={handleCheckboxChange} /> 睡觉</label>
          <label><input type="checkbox" value="code"
            checked={checkboxlist.includes('code')}
            onChange={handleCheckboxChange} /> 敲代码</label>
          <label><input type="checkbox" value="music"
            checked={checkboxlist.includes('music')}
            onChange={handleCheckboxChange} /> 听音乐 </label>
        </label>
        <hr />
        <p>
          性别：
          <label><input type="radio" name="sex" value="0" /> 保密</label>
          <label><input type="radio" name="sex" value="1" defaultChecked={true} />男</label>
          <label><input type="radio" name="sex" value="2" /> 女</label>
        </p>
        <p>
          文件上传
          <input type="file" name="avatar" />
        </p>
        <button type="submit">提交</button>
      </form>
    </>
  );
}