react如何获取表单
获取表单数据的常见方法
在React中获取表单数据可以通过多种方式实现，具体选择取决于项目需求和技术栈。以下是几种主流方法：
受控组件方式
通过React的state管理表单数据，每个表单元素绑定value和onChange事件：
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元素获取值：
function Form() {
const usernameRef = useRef();
const passwordRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log({
username: usernameRef.current.value,
password: passwordRef.current.value
});
};
return (
<form onSubmit={handleSubmit}>
<input name="username" ref={usernameRef} />
<input name="password" type="password" ref={passwordRef} />
<button type="submit">提交</button>
</form>
);
}FormData API方式
通过浏览器原生FormData对象处理：
function Form() {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
console.log(data);
};
return (
<form onSubmit={handleSubmit}>
<input name="username" />
<input name="password" type="password" />
<button type="submit">提交</button>
</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>
);
}方案对比建议
- 简单表单：优先考虑
FormData API或非受控组件 - 复杂表单验证：推荐使用
react-hook-form或formik - 需要实时反馈：受控组件更适合
- 性能敏感场景：非受控组件或
FormData更高效
每种方法各有优劣，实际开发中可根据表单复杂度、验证需求和性能要求综合选择。
