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 Hook 来跟踪每个输入值,并为整个应用程序提供"单一数据源"。

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

实例:

使用 useState Hook 来管理输入:

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.nameevent.target.value 语法。

要更新状态,请在属性名称周围使用方括号 [bracket notation]。

实例:

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

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> 之间的文本。

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

在 React 中,textarea 的值被放置在 value 属性中。 我们将使用 useState Hook 来管理 textarea 的值:

实例:

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

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 中,选择框的值是用 select 标签上的 value 属性定义的:

实例:

一个简单的选择框,其中被选择的值"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 能够以相同的方式处理所有输入元素。