3.4表单与数据处理

3.4表单与数据处理

React 进阶：表单与数据处理

表单是 Web 应用中不可或缺的一部分，用于收集用户输入并与服务器进行交互。在 React 中，处理表单数据需要一些特定的技巧。本节将深入探讨 React 中的表单处理，包括受控组件、非受控组件、表单验证以及数据提交。

3.4.1 受控组件

在 React 中，表单元素的状态由 React 组件的状态控制，这种组件被称为受控组件。这意味着表单元素的值存储在组件的状态中，并且通过事件处理函数来更新状态。

代码示例：

import React, { useState } from 'react';
function ControlledForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleNameChange = (event) => {
    setName(event.target.value);
  };
  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止默认的表单提交行为
    console.log('提交的数据：', { name, email });
    // 在这里可以发送数据到服务器
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名：</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
      </div>
      <div>
        <label htmlFor="email">邮箱：</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}
export default ControlledForm;
​

代码详解：

1. useState Hook： 使用 useState Hook 创建了 name 和 email 两个状态变量，分别用于存储姓名和邮箱的值。

2. 事件处理函数： handleNameChange 和 handleEmailChange 是事件处理函数，当输入框的值发生变化时，它们会更新对应的状态变量。

3. value 属性： input 元素的 value 属性绑定到对应的状态变量，这样 React 组件就完全控制了输入框的值。

4. onSubmit 事件： form 元素的 onSubmit 事件绑定到 handleSubmit 函数，当用户点击提交按钮时，该函数会被调用。

5. event.preventDefault()： 在 handleSubmit 函数中，调用 event.preventDefault() 方法可以阻止默认的表单提交行为，防止页面刷新。

优势：

• 数据集中管理：表单数据存储在 React 组件的状态中，易于管理和维护。

• 实时验证：可以在输入时进行实时验证，提供更好的用户体验。

• 易于控制：可以精确控制表单元素的值和行为。

3.4.2 非受控组件

与受控组件不同，非受控组件的状态由 DOM 本身管理。在 React 中，可以使用 ref 来访问 DOM 元素，并获取其值。

代码示例：

import React, { useRef } from 'react';
function UncontrolledForm() {
  const nameInput = useRef(null);
  const emailInput = useRef(null);
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交的数据：', {
      name: nameInput.current.value,
      email: emailInput.current.value,
    });
    // 在这里可以发送数据到服务器
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名：</label>
        <input type="text" id="name" ref={nameInput} />
      </div>
      <div>
        <label htmlFor="email">邮箱：</label>
        <input type="email" id="email" ref={emailInput} />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}
export default UncontrolledForm;
​

代码详解：

1. useRef Hook： 使用 useRef Hook 创建了 nameInput 和 emailInput 两个 ref 对象，用于引用输入框的 DOM 元素。

2. ref 属性： 将 ref 对象绑定到 input 元素的 ref 属性上，这样就可以通过 ref.current 访问到对应的 DOM 元素。

3. 访问 DOM 元素： 在 handleSubmit 函数中，通过 nameInput.current.value 和 emailInput.current.value 获取输入框的值。

优势：

• 代码简洁：不需要编写额外的事件处理函数来更新状态。

• 性能略高：由于不需要更新状态，性能略高于受控组件。

劣势：

• 数据管理分散：表单数据存储在 DOM 中，不易于集中管理。

• 验证困难：实时验证比较困难，需要直接操作 DOM。

• 控制性差：难以精确控制表单元素的值和行为。

选择建议：

• 如果需要对表单数据进行实时验证和控制，建议使用受控组件。

• 如果表单比较简单，且不需要复杂的验证和控制，可以使用非受控组件。

3.4.3 表单验证

表单验证是确保用户输入的数据符合要求的关键步骤。在 React 中，可以结合受控组件和正则表达式来进行表单验证。

代码示例：

import React, { useState } from 'react';
function ValidatedForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const handleNameChange = (event) => {
    const value = event.target.value;
    setName(value);
    if (value.length < 3) {
      setNameError('姓名至少需要 3 个字符');
    } else {
      setNameError('');
    }
  };
  const handleEmailChange = (event) => {
    const value = event.target.value;
    setEmail(value);
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      setEmailError('邮箱格式不正确');
    } else {
      setEmailError('');
    }
  };
  const handleSubmit = (event) => {
    event.preventDefault();
    if (nameError || emailError || !name || !email) {
      alert('请检查表单是否填写正确');
      return;
    }
    console.log('提交的数据：', { name, email });
    // 在这里可以发送数据到服务器
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名：</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
        {nameError && <p className="error">{nameError}</p>}
      </div>
      <div>
        <label htmlFor="email">邮箱：</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={handleEmailChange}
        />
        {emailError && <p className="error">{emailError}</p>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}
export default ValidatedForm;
​

代码详解：

1. 错误状态： 使用 useState Hook 创建了 nameError 和 emailError 两个状态变量，用于存储错误信息。

2. 验证逻辑： 在 handleNameChange 和 handleEmailChange 函数中，添加了验证逻辑，根据输入的值更新对应的错误状态。

3. 错误提示： 在 JSX 中，根据错误状态显示错误提示信息。

4. 提交验证： 在 handleSubmit 函数中，检查是否存在错误，如果存在则阻止表单提交。

表单验证流程图：

3.4.4 数据提交

表单验证通过后，就可以将数据提交到服务器。可以使用 fetch 或 axios 等库来发送 HTTP 请求。

代码示例（使用 fetch）：

import React, { useState } from 'react';
function DataSubmissionForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, email }),
      });
      if (response.ok) {
        console.log('数据提交成功');
        // 清空表单
        setName('');
        setEmail('');
      } else {
        console.error('数据提交失败');
      }
    } catch (error) {
      console.error('发生错误：', error);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素 */}
    </form>
  );
}
export default DataSubmissionForm;
​

代码详解：

1. fetch 请求： 使用 fetch 函数发送 POST 请求到 /api/submit 接口。

2. 请求头： 设置 Content-Type 为 application/json，表示发送的是 JSON 数据。

3. 请求体： 将表单数据转换为 JSON 字符串，作为请求体发送。

4. 响应处理： 根据响应状态判断数据是否提交成功，并进行相应的处理。

3.4.5 第三方库

除了手动编写表单处理逻辑，还可以使用第三方库来简化开发，例如：

• Formik： 提供了表单状态管理、验证和提交等功能。

• React Hook Form： 专注于性能和易用性，提供了简洁的 API。

• Yup： 用于定义验证规则，可以与 Formik 和 React Hook Form 集成使用。

这些库可以大大提高开发效率，并减少代码量。

总结

React 中的表单处理是一个重要的主题。通过理解受控组件和非受控组件的区别，掌握表单验证和数据提交的方法，可以构建出功能完善、用户体验良好的 Web 应用。同时，合理利用第三方库可以简化开发流程，提高开发效率。