react如何实现两个FORM

实现两个表单的基本结构

在React中创建两个表单可以通过分别定义两个独立的表单组件实现。每个表单应包含自己的状态管理和提交逻辑。

function Form1() {
  const [formData, setFormData] = useState({ field1: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form1 submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={formData.field1}
        onChange={(e) => setFormData({...formData, field1: e.target.value})}
      />
      <button type="submit">Submit Form 1</button>
    </form>
  );
}

function Form2() {
  const [formData, setFormData] = useState({ field2: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form2 submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={formData.field2}
        onChange={(e) => setFormData({...formData, field2: e.target.value})}
      />
      <button type="submit">Submit Form 2</button>
    </form>
  );
}

在父组件中组合表单

将两个表单组件组合在一个父组件中，可以保持它们逻辑上的独立性同时共享同一个界面。

function App() {
  return (
    <div>
      <h3>Form 1</h3>
      <Form1 />
      <h3>Form 2</h3>
      <Form2 />
    </div>
  );
}

共享表单状态管理

如果需要两个表单共享状态或提交逻辑，可以使用状态提升到父组件。

function CombinedForms() {
  const [form1Data, setForm1Data] = useState({ field1: '' });
  const [form2Data, setForm2Data] = useState({ field2: '' });

  const handleSubmitAll = (e) => {
    e.preventDefault();
    console.log('Combined data:', { ...form1Data, ...form2Data });
  };

  return (
    <form onSubmit={handleSubmitAll}>
      <input 
        value={form1Data.field1}
        onChange={(e) => setForm1Data({...form1Data, field1: e.target.value})}
      />
      <input 
        value={form2Data.field2}
        onChange={(e) => setForm2Data({...form2Data, field2: e.target.value})}
      />
      <button type="submit">Submit Both Forms</button>
    </form>
  );
}

使用表单库简化开发

对于复杂表单场景，可以考虑使用Formik或React Hook Form等库来管理多个表单。

import { useForm } from 'react-hook-form';

function ReactHookFormExample() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('form1Field')} />
      <input {...register('form2Field')} />
      <button type="submit">Submit</button>
    </form>
  );
}

动态表单生成

当表单数量不固定时，可以通过数组映射动态生成多个表单。

function DynamicForms() {
  const [forms, setForms] = useState([
    { id: 1, value: '' },
    { id: 2, value: '' }
  ]);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(forms);
  };

  return (
    <form onSubmit={handleSubmit}>
      {forms.map((form) => (
        <input
          key={form.id}
          value={form.value}
          onChange={(e) => {
            const updatedForms = forms.map(f => 
              f.id === form.id ? { ...f, value: e.target.value } : f
            );
            setForms(updatedForms);
          }}
        />
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}