菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 Hook 部分。

示例

使用 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 />);

运行示例 »


w3schools CERTIFIED . 2022

获得认证!

完成 React 模块,完成练习,参加考试,并获得 w3schools 认证!

$95 注册

提交表单

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

示例

添加一个提交按钮并在 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 中首选的方式。


Textarea

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 能够以相同的方式处理所有输入元素。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持