23 表单处理之表单的基本使用

在上一篇中，我们讨论了受控组件与非受控组件的概念。在本篇中，我们将深入探讨 React.js 中表单的基本使用，同时为后续的表单提交处理奠定基础。

表单的基本结构

在 HTML 中，表单通常包含各种输入元素，如文本框、复选框、单选按钮等。React 中的表单处理依然使用这些基本元素，但我们通过组件化的方式来管理相应的状态。

function MyForm() {
  return (
    <form>
      <label>
        名字:
        <input type="text" />
      </label>
      <br />
      <label>
        年龄:
        <input type="number" />
      </label>
      <br />
      <input type="submit" value="提交" />
    </form>
  );
}

上面的代码展示了一个简单的表单结构，其中包含一个文本框用于输入名字，一个数字框用于输入年龄，以及一个提交按钮。

受控组件与非受控组件的进一步应用

在处理表单时，受控组件与非受控组件的区别非常重要。受控组件通过 React 的状态管理输入，而非受控组件则是依赖于 DOM。在这里，我们将集中讨论受控组件，它们能带来更好的数据管理和用户体验。

受控组件示例

我们将创建一个简单的受控组件表单，实现对用户输入的实时捕获和显示。

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleAgeChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <form>
      <label>
        名字:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        年龄:
        <input type="number" value={age} onChange={handleAgeChange} />
      </label>
      <br />
      <div>
        <h3>您输入的名字: {name}</h3>
        <h3>您输入的年龄: {age}</h3>
      </div>
      <input type="submit" value="提交" />
    </form>
  );
}

在以上代码中，我们定义了两个状态 name 和 age，并通过 onChange 事件处理来实时更新状态。当用户输入内容时，我们可以立即看到其在下方区域的反映。

表单验证

在表单中，验证用户输入是一个常见的需求。我们可以在提交时对输入进行验证。以下是一个简单的实现用户输入验证的例子：

function ValidatedForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!name || !age) {
      setError('名字和年龄都是必填的!');
    } else {
      setError('');
      alert(`提交成功: ${name}, ${age}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <br />
      <label>
        年龄:
        <input type="number" value={age} onChange={(e) => setAge(e.target.value)} />
      </label>
      <br />
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <input type="submit" value="提交" />
    </form>
  );
}

这个示例中，我们在表单提交时进行基本的验证，确保 名字 和 年龄 不为空。如果验证失败，则展示错误信息。

小结

在本篇中，我们介绍了 React.js 中表单的基本使用，包括受控组件的实现与用户输入验证。受控组件使我们能够轻松地获取和管理用户输入的数据，为后续的表单提交处理做好铺垫。

在下一篇文章中，我们将讨论表单提交的处理方法。在此之前，确保您对受控组件和表单的基本使用有清晰的理解，为后续学习做好准备。