手册
目录
就像在 HTML 中一样，React 使用表单来允许用户与网页交互。
您可以像添加任何其他元素一样使用 React 添加表单:
添加允许用户输入姓名的表单:
function MyForm() {
return (
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(运行实例 »
这将正常工作，表单将提交并且页面将刷新。
但这通常不是我们希望在 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 (
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(运行实例 »
您可以通过在 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 (
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(运行实例 »
您可以通过为每个元素添加 name 属性来控制多个输入字段的值。
我们将使用一个空对象来初始化我们的状态。
要访问事件处理程序中的字段，请使用 event.target.name 和 event.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 (
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(运行实例 »
注意:我们对两个输入字段使用相同的事件处理函数，我们可以为每个字段编写一个事件处理函数，但这给了我们更简洁的代码并且是 React 中的首选方式。
React 中的 textarea 元素与普通 HTML 略有不同。
在 HTML 中，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 (
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(运行实例 »
React 中的下拉列表或选择框也与 HTML 有点不同。
在 HTML 中，下拉列表中的选定值是使用 selected 属性定义的:
在 React 中，选择框的值是用 select 标签上的 value 属性定义的:
一个简单的选择框，其中被选择的值"Volvo"在构造函数中被初始化:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
)
}
运行实例 »
通过对