在 React 中，表单处理与传统 HTML 表单的处理方式有所不同。React 提供了受控组件（controlled components）的概念，它要求你通过组件的状态（state）来控制表单元素的值。这种方式使得 React 更加灵活和可预测，能够帮助开发者处理表单中的数据和事件。
React 中的事件系统也与原生的 JavaScript 事件系统略有不同，它使用合成事件（Synthetic Events），这是一种跨浏览器的封装机制，可以确保在不同浏览器中保持一致性。
目录
1. 受控组件与非受控组件
1.1 受控组件
在 React 中，受控组件是指表单元素的值由 React 状态管理（通过 state）。所有的用户输入会更新 state，从而触发组件重新渲染。
示例：受控组件
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value); // 更新状态
};
const handleSubmit = (event) => {
event.preventDefault(); // 阻止表单默认提交行为
alert('提交的值是：' + inputValue);
};
return (
<form onSubmit={handleSubmit}>
<label>
输入：
<input
type="text"
value={inputValue} // 受控组件的值来自 React 状态
onChange={handleChange} // 用户输入时更新状态
/>
</label>
<button type="submit">提交</button>
</form>
);
}
export default MyForm;
解释：
inputValue：存储输入框的值。setInputValue：更新inputValue的函数。handleChange：每当用户输入时，更新状态。value属性：输入框的值由inputValue状态管理。onChange事件：当输入框的内容变化时触发，调用handleChange更新状态。
1.2 非受控组件
非受控组件是指表单元素的值由 DOM 管理，而不是 React 的 state。在这种情况下，通常使用 ref 来直接访问 DOM 元素的值。
示例：非受控组件
import React, { useRef } from 'react';
function MyForm() {
const inputRef = useRef();
const handleSubmit = (event) => {
event.preventDefault();
alert('提交的值是：' + inputRef.current.value); // 通过 ref 访问 DOM 元素的值
};
return (
<form onSubmit={handleSubmit}>
<label>
输入：
<input type="text" ref={inputRef} />
</label>
<button type="submit">提交</button>
</form>
);
}
export default MyForm;
解释：
- 使用
useRef创建一个inputRef引用。 - 在表单提交时，通过
inputRef.current.value直接访问输入框的值，而不是通过 React 状态。
受控组件通常更符合 React 的工作方式，因为它们让数据流更加一致且易于管理，而非受控组件则在某些简单场景下可能更加高效。
2. React 表单事件处理
在 React 中，表单事件处理与普通的 HTML 不同。React 使用 合成事件（Synthetic Events），这些事件在浏览器中是跨浏览器一致的，并且封装了原生事件的行为。
2.1 事件处理
React 事件处理的方法是通过合成事件来传递的，每个事件都传递一个 event 对象，该对象与浏览器的原生事件类似，但具有统一的 API。
示例：事件处理
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert('提交的值是：' + inputValue);
};
return (
<form onSubmit={handleSubmit}>
<label>
输入：
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<button type="submit">提交</button>
</form>
);
}
export default MyForm;
2.2 常见事件类型
onClick：点击事件。onChange：表单元素的值发生变化时触发。onSubmit：表单提交事件。onFocus：元素获得焦点时触发。onBlur：元素失去焦点时触发。
2.3 事件绑定
React 事件通过 on<Event> 语法绑定，onChange、onSubmit 等都使用小驼峰命名法，而不是传统的 onclick、onchange。
3. 表单提交与重置
在表单处理中，提交和重置是两种常见操作。React 使得这些操作变得更加容易。
3.1 表单提交
通常我们会在表单提交时执行一些操作，如发送 AJAX 请求、更新状态等。React 中的 onSubmit 事件可以帮助我们处理表单的提交。
示例：表单提交
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (event) => {
event.preventDefault(); // 阻止默认的提交行为
alert('提交的值是：' + inputValue);
};
return (
<form onSubmit={handleSubmit}>
<label>
输入：
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</label>
<button type="submit">提交</button>
</form>
);
}
export default MyForm;
3.2 表单重置
我们也可以在 React 中重置表单，通过重置状态来清空输入字段。
示例：表单重置
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleReset = () => {
setInputValue(''); // 清空输入框
};
return (
<form>
<label>
输入：
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</label>
<button type="button" onClick={handleReset}>重置</button>
</form>
);
}
export default MyForm;
4. 参考资料
出站链接
站内链接
通过使用 React 的受控组件和事件处理机制，可以更方便地处理表单输入和表单事件。这种方式能够使表单的行为更加可预测和可控，同时也便于与 React 的状态管理系统进行交互。
发表回复