React中FormData的使用

1. export default function Signup() {
   
2.   function handleSubmit(event) {
   
3.     event.preventDefault();
   
4.     const fd = new FormData(event.target);
   
5.     console.log(fd.get("email"));
   
6.     const acquisitionData = fd.getAll("acquisition");
   
7.     const data = Object.fromEntries(fd);
   
8.     data.acquisition = acquisitionData;
   
9.     console.log(data);
   
10.   }
    
11.   return (
    
12.     <form onSubmit={handleSubmit}>
    
13.       <h2>Welcome on board!</h2>
    
14.       <p>We just need a little bit of data from you to get you started 🚀</p>
    
15.       <div className="control">
    
16.         <label htmlFor="email">Email</label>
    
17.         <input id="email" type="email" name="email" />
    
18.       </div>
    
19.       <div className="control-row">
    
20.         <div className="control">
    
21.           <label htmlFor="password">Password</label>
    
22.           <input id="password" type="password" name="password" />
    
23.         </div>
    
24.         <div className="control">
    
25.           <label htmlFor="confirm-password">Confirm Password</label>
    
26.           <input
    
27.             id="confirm-password"
    
28.             type="password"
    
29.             name="confirm-password"
    
30.           />
    
31.         </div>
    
32.       </div>
    
33.       <hr />
    
34.       <div className="control-row">
    
35.         <div className="control">
    
36.           <label htmlFor="first-name">First Name</label>
    
37.           <input type="text" id="first-name" name="first-name" />
    
38.         </div>
    
39.         <div className="control">
    
40.           <label htmlFor="last-name">Last Name</label>
    
41.           <input type="text" id="last-name" name="last-name" />
    
42.         </div>
    
43.       </div>
    
44.       <div className="control">
    
45.         <label htmlFor="phone">What best describes your role?</label>
    
46.         <select id="role" name="role">
    
47.           <option value="student">Student</option>
    
48.           <option value="teacher">Teacher</option>
    
49.           <option value="employee">Employee</option>
    
50.           <option value="founder">Founder</option>
    
51.           <option value="other">Other</option>
    
52.         </select>
    
53.       </div>
    
54.       <fieldset>
    
55.         <legend>How did you find us?</legend>
    
56.         <div className="control">
    
57.           <input
    
58.             type="checkbox"
    
59.             id="google"
    
60.             name="acquisition"
    
61.             value="google"
    
62.           />
    
63.           <label htmlFor="google">Google</label>
    
64.         </div>
    
65.         <div className="control">
    
66.           <input
    
67.             type="checkbox"
    
68.             id="friend"
    
69.             name="acquisition"
    
70.             value="friend"
    
71.           />
    
72.           <label htmlFor="friend">Referred by friend</label>
    
73.         </div>
    
74.         <div className="control">
    
75.           <input type="checkbox" id="other" name="acquisition" value="other" />
    
76.           <label htmlFor="other">Other</label>
    
77.         </div>
    
78.       </fieldset>
    
79.       <div className="control">
    
80.         <label htmlFor="terms-and-conditions">
    
81.           <input type="checkbox" id="terms-and-conditions" name="terms" />I
    
82.           agree to the terms and conditions
    
83.         </label>
    
84.       </div>
    
85.       <p className="form-actions">
    
86.         <button type="reset" className="button button-flat">
    
87.           Reset
    
88.         </button>
    
89.         <button type="submit" className="button">
    
90.           Sign up
    
91.         </button>
    
92.       </p>
    
93.     </form>
    
94.   );
    
95. }

复制代码

1. FormData

复制代码

是一个强大的 API，用于处理表单数据，特别是在需要将表单数据发送到服务器时非常有用。以下是对

1. FormData

复制代码

的详细使用说明，包括如何创建、操作和使用它。

1. 创建 FormData 对象

从表单元素创建
可以通过将表单元素传递给

1. FormData

复制代码

构造函数来创建一个

1. FormData

复制代码

对象。这会自动将表单中所有带有

1. name

复制代码

属性的字段添加到

1. FormData

复制代码

中。

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

复制代码

手动创建
也可以手动创建一个空的

1. FormData

复制代码

对象，然后逐步添加数据。

1. const formData = new FormData();

复制代码

2. 添加数据到 FormData

1. append(key, value)

复制代码

用于向

1. FormData

复制代码

中添加一个键值对。

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

复制代码

1. set(key, value)

复制代码

与

1. append

复制代码

类似，但如果键已经存在，则会替换原有的值。

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

复制代码

1. delete(key)

复制代码

用于删除指定的键值对。

1. formData.delete('username');

复制代码

3. 获取 FormData 中的数据

1. get(key)

复制代码

获取指定键的值。

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

复制代码

1. getAll(key)

复制代码

获取指定键的所有值（如果一个键有多个值）。

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

复制代码

1. has(key)

复制代码

检查

1. FormData

复制代码

是否包含指定的键。

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

复制代码

4. 遍历 FormData

1. forEach(callback)

复制代码

遍历

1. FormData

复制代码

中的所有键值对。

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

复制代码

1. entries()

复制代码

返回一个迭代器，可以用来遍历所有键值对。

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

复制代码

1. keys()

复制代码

和

1. values()

复制代码

分别返回一个迭代器，用于遍历所有键或所有值。

1. for (const key of formData.keys()) {
   
2.   console.log(key);
   
3. }
   
4. for (const value of formData.values()) {
   
5.   console.log(value);
   
6. }

复制代码

5. 将 FormData 转换为其他格式

转换为对象
可以将

1. FormData

复制代码

转换为普通的 JavaScript 对象。

1. const formDataObject = {};
   
2. formData.forEach((value, key) => {
   
3.   formDataObject[key] = value;
   
4. });
   
5. console.log(formDataObject);

复制代码

转换为 JSON
如果需要将

1. FormData

复制代码

转换为 JSON，可以先将其转换为对象，然后再使用

1. JSON.stringify

复制代码

。

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

复制代码

6. 使用 FormData 提交表单

通过

1. fetch

复制代码

发送数据

1. fetch

复制代码

API 支持直接发送

1. FormData

复制代码

对象作为请求体。

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

复制代码

通过

1. XMLHttpRequest

复制代码

发送数据

1. XMLHttpRequest

复制代码

也支持直接发送

1. FormData

复制代码

。

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

复制代码

7. 文件上传

1. FormData

复制代码

特别适合处理文件上传，因为它可以轻松地将文件添加到表单数据中。

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

复制代码

然后通过

1. fetch

复制代码

或

1. XMLHttpRequest

复制代码

发送数据：

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

复制代码

8. 在 React 中使用 FormData

在 React 中，可以结合表单的

1. onSubmit

复制代码

事件使用

1. FormData

复制代码

。

1. function MyForm() {
   
2.   const handleSubmit = (e) => {
   
3.     e.preventDefault();
   
4.     const formData = new FormData(e.target);
   
5.     // 处理表单数据
   
6.     console.log(Object.fromEntries(formData.entries()));
   
7.   };
   
8.   return (
   
9.     <form onSubmit={handleSubmit}>
   
10.       <input type="text" name="username" />
    
11.       <input type="email" name="email" />
    
12.       <button type="submit">提交</button>
    
13.     </form>
    
14.   );
    
15. }

复制代码

总结

1. FormData

复制代码

是一个非常灵活的工具，适用于处理表单数据，特别是在需要发送文件或复杂表单数据时。它支持动态添加、修改和删除数据，并且可以直接与

1. fetch

复制代码

或

1. XMLHttpRequest

复制代码

配合使用，方便地将数据发送到服务器。
到此这篇关于React中FormData的使用实例详解的文章就介绍到这了,更多相关React FormData使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/3396470jr.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！