react两个表单如何单独提交
实现 React 中两个表单单独提交的方法
方法一：使用独立的状态和提交函数
为每个表单分别定义独立的状态和提交处理函数，确保表单之间互不干扰。
function DualForm() {
const [form1Data, setForm1Data] = useState({});
const [form2Data, setForm2Data] = useState({});
const handleSubmit1 = (e) => {
e.preventDefault();
console.log('Form 1 submitted:', form1Data);
// 提交表单1的逻辑
};
const handleSubmit2 = (e) => {
e.preventDefault();
console.log('Form 2 submitted:', form2Data);
// 提交表单2的逻辑
};
return (
<div>
<form onSubmit={handleSubmit1}>
<input
name="field1"
onChange={(e) => setForm1Data({...form1Data, [e.target.name]: e.target.value})}
/>
<button type="submit">Submit Form 1</button>
</form>
<form onSubmit={handleSubmit2}>
<input
name="field2"
onChange={(e) => setForm2Data({...form2Data, [e.target.name]: e.target.value})}
/>
<button type="submit">Submit Form 2</button>
</form>
</div>
);
}方法二：使用 useRef 管理表单数据
通过 useRef 直接访问表单元素，避免状态管理，适合简单场景。
function RefForm() {
const form1Ref = useRef();
const form2Ref = useRef();
const handleSubmit1 = (e) => {
e.preventDefault();
const data = new FormData(form1Ref.current);
console.log('Form 1 data:', Object.fromEntries(data));
};
const handleSubmit2 = (e) => {
e.preventDefault();
const data = new FormData(form2Ref.current);
console.log('Form 2 data:', Object.fromEntries(data));
};
return (
<div>
<form ref={form1Ref} onSubmit={handleSubmit1}>
<input name="field1" />
<button type="submit">Submit Form 1</button>
</form>
<form ref={form2Ref} onSubmit={handleSubmit2}>
<input name="field2" />
<button type="submit">Submit Form 2</button>
</form>
</div>
);
}方法三：使用表单库实现隔离
利用如 Formik 等表单库，为每个表单创建独立实例，获得更完善的功能隔离。
import { Formik, Form, Field } from 'formik';
function FormikForms() {
return (
<div>
<Formik
initialValues={{ field1: '' }}
onSubmit={(values) => console.log('Form 1:', values)}
>
<Form>
<Field name="field1" />
<button type="submit">Submit Form 1</button>
</Form>
</Formik>
<Formik
initialValues={{ field2: '' }}
onSubmit={(values) => console.log('Form 2:', values)}
>
<Form>
<Field name="field2" />
<button type="submit">Submit Form 2</button>
</Form>
</Formik>
</div>
);
}关键注意事项
- 确保每个表单有独立的提交按钮和 onSubmit 处理函数
- 避免在父组件中合并处理多个表单的提交逻辑
- 为表单元素设置不同的 name 属性，防止数据混淆
- 考虑使用表单库（如 Formik、React Hook Form）简化复杂场景下的表单管理
以上方法均可实现表单的独立提交，选择取决于项目复杂度。简单场景可用原生实现，复杂场景推荐使用表单库。
