React中FormData的使用实例详解

export default function Signup() {
  function handleSubmit(event) {
    event.preventDefault();
    const fd = new FormData(event.target);
    console.log(fd.get("email"));
    const acquisitionData = fd.getAll("acquisition");
    const data = Object.fromEntries(fd);
    data.acquisition = acquisitionData;
    console.log(data);
  }
  return (
    <form onSubmit={handleSubmit}>
      <h2>Welcome on board!</h2>
      <p>We just need a little bit of data from you to get you started </p>
      <div className="control">
        <label htmlFor="email">Email</label>
        <input id="email" type="email" name="email" />
      </div>
      <div className="control-row">
        <div className="control">
          <label htmlFor="password">Password</label>
          <input id="password" type="password" name="password" />
        </div>
        <div className="control">
          <label htmlFor="confirm-password">Confirm Password</label>
          <input
            id="confirm-password"
            type="password"
            name="confirm-password"
          />
        </div>
      </div>
      <hr />
      <div className="control-row">
        <div className="control">
          <label htmlFor="first-name">First Name</label>
          <input type="text" id="first-name" name="first-name" />
        </div>
        <div className="control">
          <label htmlFor="last-name">Last Name</label>
          <input type="text" id="last-name" name="last-name" />
        </div>
      </div>
      <div className="control">
        <label htmlFor="phone">What best describes your role?</label>
        <select id="role" name="role">
          <option value="student">Student</option>
          <option value="teacher">Teacher</option>
          <option value="employee">Employee</option>
          <option value="founder">Founder</option>
          <option value="other">Other</option>
        </select>
      </div>
      <fieldset>
        <legend>How did you find us?</legend>
        <div className="control">
          <input
            type="checkbox"
            id="google"
            name="acquisition"
            value="google"
          />
          <label htmlFor="google">Google</label>
        </div>
        <div className="control">
          <input
            type="checkbox"
            id="friend"
            name="acquisition"
            value="friend"
          />
          <label htmlFor="friend">Referred by friend</label>
        </div>
        <div className="control">
          <input type="checkbox" id="other" name="acquisition" value="other" />
          <label htmlFor="other">Other</label>
        </div>
      </fieldset>
      <div className="control">
        <label htmlFor="terms-and-conditions">
          <input type="checkbox" id="terms-and-conditions" name="terms" />I
          agree to the terms and conditions
        </label>
      </div>
      <p className="form-actions">
        <button type="reset" className="button button-flat">
          Reset
        </button>
        <button type="submit" className="button">
          Sign up
        </button>
      </p>
    </form>
  );
}

const form = document.querySelector('form');
const formData = new FormData(form);

const formData = new FormData();

formData.append('username', 'john_doe');
formData.append('email', 'john@example.com');

formData.set('username', 'john_doe'); // 添加
formData.set('username', 'jane_doe'); // 替换

formData.delete('username');

const username = formData.get('username');
console.log(username); // 输出 'john_doe'

formData.append('hobbies', 'reading');
formData.append('hobbies', 'coding');
const hobbies = formData.getAll('hobbies');
console.log(hobbies); // 输出 ['reading', 'coding']

console.log(formData.has('username')); // 输出 true 或 false

formData.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

for (const key of formData.keys()) {
  console.log(key);
}
for (const value of formData.values()) {
  console.log(value);
}

const formDataObject = {};
formData.forEach((value, key) => {
  formDataObject[key] = value;
});
console.log(formDataObject);

const formDataObject = Object.fromEntries(formData.entries());
const formDataJSON = JSON.stringify(formDataObject);
console.log(formDataJSON);

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/submit');
xhr.send(formData);

const formData = new FormData();
formData.append('profile_picture', fileInput.files[0]); // fileInput 是文件输入元素

fetch('https://example.com/api/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // 处理表单数据
    console.log(Object.fromEntries(formData.entries()));
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="email" name="email" />
      <button type="submit">提交</button>
    </form>
  );
}