如何在 React 中创建表单？

表单是 Web 应用程序中常见的一部分，React 中提供了许多构建表单的功能。本文将介绍如何在 React 中创建表单，包括输入框、下拉列表、复选框、单选框、提交按钮等。

创建一个基本表单

首先，我们创建一个基本的表单，它包含一个输入框和一个提交按钮。

import React, { useState } from 'react';

function BasicForm() {
  const [value, setValue] = useState('');

  const handleSubmit = (event) => {
    alert('提交的值是：' + value);
    event.preventDefault();
  };

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字：
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default BasicForm;

以上代码中，我们使用 useState 钩子来创建一个状态变量 value，并使用 setValue 函数来更新其值。在表单中，我们将 value 的值绑定到输入框的 value 属性，并使用 handleChange 函数来处理输入框值的变化。同时，我们将 handleSubmit 函数绑定到表单的 onSubmit 属性，以处理表单提交事件。

添加下拉列表

我们可以使用 <select> 元素来创建下拉列表，由多个 <option> 元素组成。

import React, { useState } from 'react';

function SelectForm() {
  const [value, setValue] = useState('coconut');

  const handleSubmit = (event) => {
    alert('提交的值是：' + value);
    event.preventDefault();
  };

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        选择你喜欢的风味：
        <select value={value} onChange={handleChange}>
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
          <option value="coconut">椰子</option>
          <option value="mango">芒果</option>
        </select>
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default SelectForm;

以上代码中，我们创建了一个下拉列表，并使用 value 属性和 handleChange 函数来绑定其值。

添加复选框和单选框

我们可以使用 <input> 元素来创建复选框和单选框，需要区分不同类型的表单项，可以通过添加 type 属性来实现。

以下是复选框的例子：

import React, { useState } from 'react';

function CheckboxForm() {
  const [checkboxes, setCheckboxes] = useState({
    isGoing: false,
    numberOfGuests: 2,
  });

  const handleSubmit = (event) => {
    alert('选项：' + checkboxes.isGoing + ',' + checkboxes.numberOfGuests);
    event.preventDefault();
  };

  const handleChange = (event) => {
    const target = event.target;
    const value =
      target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    setCheckboxes({
      ...checkboxes,
      [name]: value,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        参与：
        <input
          name="isGoing"
          type="checkbox"
          checked={checkboxes.isGoing}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        来宾人数：
        <input
          name="numberOfGuests"
          type="number"
          value={checkboxes.numberOfGuests}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default CheckboxForm;

以上代码中，我们使用 useState 钩子来创建一个状态变量 checkboxes，并使用 setCheckboxes 函数来更新其值。在表单中，我们添加了一个复选框和一个数字输入框。我们将 checkboxes 变量的属性绑定到复选框和输入框的 checked 和 value 属性，并使用 handleChange 函数来处理这些元素的变化。

以下是单选框的例子：

import React, { useState } from 'react';

function RadioForm() {
  const [value, setValue] = useState('female');

  const handleSubmit = (event) => {
    alert('提交的值是：' + value);
    event.preventDefault();
  };

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          <input
            type="radio"
            value="male"
            checked={value === 'male'}
            onChange={handleChange}
          />
          男性
        </label>
      </div>
      <div>
        <label>
          <input
            type="radio"
            value="female"
            checked={value === 'female'}
            onChange={handleChange}
          />
          女性
        </label>
      </div>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default RadioForm;

以上代码中，我们使用 useState 钩子来创建一个状态变量 value，并使用 setValue 函数来更新其值。在表单中，我们添加了两个单选框，每个单选框都有一个不同的 value 属性，并使用 handleChange 函数来处理单选框的变化。

总结

React 提供了许多用于创建表单的方法。我们可以通过使用不同的表单元素和事件处理程序来创建输入框、下拉列表、复选框、单选框和提交按钮，以及其他表单元素。将它们组合起来，我们可以轻松地创建功能丰富的表单，以便用户输入和提交数据。