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 />);
提交表单
您可以在 <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.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 中的文本区域元素略微不同于普通的 HTML。
在 HTML 中，文本区域的值是在开始标签 <textarea> 和结束标签 </textarea> 之间的文本。
<textarea>
Content of the textarea.
</textarea>在 React 中，文本区域的值放置在 value 属性中。我们将使用 useState Hook 来管理文本区域的值
示例
一个简单的文本区域，包含一些内容
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 属性定义
示例
一个简单的选择框，其中选定值“沃尔沃”在构造函数中初始化
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 能够以相同的方式处理所有输入元素。
