码农教程 - 一技在手,衣食无忧! tools

React 表单

❮ 上一节 下一节 ❯

就像 HTML 一样，React 使用表单来允许用户与网页交互。

在 React 中添加表单

您可以像任何其他元素一样使用 React 添加表单：

例子：

添加一个允许用户输入姓名的表单：

function MyForm() {
  return (
    <form>
      <label>Enter your name:
        <input type="text" />
      </label>
    </form>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

运行示例 »

这将正常工作，表单将提交并且页面将刷新。

但这通常不是我们希望在 React 中发生的情况。

我们希望阻止这种默认行为并让 React 控制表单。

处理表格

处理表单是关于当数据更改值或提交时如何处理数据。

在 HTML 中，表单数据通常由 DOM 处理。

在 React 中，表单数据通常由组件处理。

当组件处理数据时，所有数据都存储在组件状态中。

您可以通过在中添加事件处理程序来控制更改onChange属性。

我们可以使用useState用于跟踪每个输入值并为整个应用程序提供"single source of truth"。

请参阅React Hooks部分了解有关 Hook 的更多信息。

例子：

使用useState管理输入的钩子：

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <label>Enter your name:
        <input
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

运行示例 »

提交表格

您可以通过在中添加事件处理程序来控制提交操作onSubmit属性为<form>:

例子：

添加一个提交按钮和一个事件处理程序onSubmit属性：

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

运行示例 »

多个输入字段

您可以通过添加一个来控制多个输入字段的值name每个元素的属性。

我们将用一个空对象初始化我们的状态。

要访问事件处理程序中的字段，请使用event.target.name和event.target.value语法。

要更新状态，请在属性名称两边使用方括号 [括号表示法]。

例子：

编写一个包含两个输入字段的表单：

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

运行示例 »

笔记：我们对两个输入字段使用相同的事件处理程序函数，我们可以为每个输入字段编写一个事件处理程序，但这给我们带来了更清晰的代码，并且是 React 中的首选方式。

文本区

React 中的 textarea 元素与普通 HTML 略有不同。

在 HTML 中，文本区域的值是开始标记之间的文本<textarea>和结束标签</textarea>。

<textarea>
  Content of the textarea.
</textarea>

在 React 中，文本区域的值被放置在 value 属性中。我们将使用useState管理文本区域值的钩子：

例子：

一个包含一些内容的简单文本区域：

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [textarea, setTextarea] = useState(
    "The content of a textarea goes in the value attribute"
  );

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

  return (
    <form>
      <textarea value={textarea} onChange={handleChange} />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

运行示例 »

选择

React 中的下拉列表或选择框也与 HTML 有所不同。

在 HTML 中，下拉列表中的选定值是用selected属性：

HTML：

<select>
  <option value="Ford">Ford</option>
  <option value="Volvo" selected>Volvo</option>
  <option value="Fiat">Fiat</option>
</select>

在 React 中，所选值是用value属性上的select标签：

例子：

一个简单的选择框，其中所选值 "Volvo" 在构造函数中初始化：

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

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

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}

运行示例 »

通过进行这些细微的改变<textarea>和<select>，React 能够以相同的方式处理所有输入元素。

❮ 上一节 下一节 ❯