react如何获取表单内容
获取表单内容的几种方法
受控组件方式
在React中推荐使用受控组件管理表单数据。通过onChange事件和value属性绑定表单元素与状态：
import { useState } from 'react';
function Form() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData); // 获取到的表单数据
};
return (
<form onSubmit={handleSubmit}>
<input
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
name="password"
type="password"
value={formData.password}
onChange={handleChange}
/>
<button type="submit">提交</button>
</form>
);
}非受控组件方式
通过useRef直接访问DOM元素获取值：
import { useRef } from 'react';
function Form() {
const inputRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputRef.current.value); // 通过ref获取值
};
return (
<form onSubmit={handleSubmit}>
<input ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}FormData API方式
适用于原生表单提交场景，可通过FormData对象获取所有表单字段：
function Form() {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
console.log(Object.fromEntries(formData)); // 转换为普通对象
};
return (
<form onSubmit={handleSubmit}>
<input name="email" />
<input name="phone" />
<button type="submit">提交</button>
</form>
);
}表单库方案
对于复杂表单场景，推荐使用表单库如Formik或React Hook Form。以React Hook Form为例：
import { useForm } from 'react-hook-form';
function Form() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data); // 自动收集的表单数据
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('username')} />
<input {...register('password')} type="password" />
<button type="submit">提交</button>
</form>
);
}注意事项
- 受控组件适合需要实时验证或即时反馈的场景
- 非受控组件适合简单表单或需要直接操作DOM的情况
- 表单库能显著减少样板代码，提供更好的性能优化
