如何根据条件显示表单组件？

Question

我有一个包含 3 个表单的表单，每个子表单都有其单独的提交按钮，而父表单将有其自己的提交按钮。我想一个接一个地显示表格，就像最初只显示第一个表格，然后单击继续，将显示第一个和第二个表格，然后再次单击继续，将显示第一个、第二个、第三个表格。所有 3 个表单都在 3 个不同组件的同一页面上。代码结构是这样的： Codebox link

我也遇到了错误

<form> cannot appear as a descendant of <form>

因为表格中的表格，有没有办法实现同样的效果而不是错误

Answer 1

我想到了这样的事情，我们可以保留表格编号的计数，并在每次单击继续时加一。但是在启用继续按钮之前需要进行验证，另外，您需要额外处理最后一步。



export default function App() {
  const [formNumber, setFormNumber] = useState(0)
  const initialValues = { name: "", email: "", number: "" };
  const onSubmit = async (values, { setSubmitting }) => {
    console.log(" Final Values", values);
  };
  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      {({ isSubmitting, values, setFieldValue }) => (
        <Form className="space-y-7">
          {formNumber === 0 && <Form1 initialValues={initialValues} />}
          {formNumber === 1 && <Form2 initialValues={initialValues} />}
          {formNumber === 2 && <Form3 initialValues={initialValues} />}
          <div className="flex flex-row-reverse">
            <button  onClick={()=> setFormNumber(formNumber + 1)} type="button">Continue</button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

您可以不使用表单组件，而是将其设为具有 3 个输入的单个表单。我相信那会更容易。

Answer 2

您应该使用 useState 保存当前表单的索引，然后创建一个函数来更改当前索引并将其作为函数传递给 child 组件！使用这个：

import "./styles.css";
import React,{useState} from "react";
import { Formik, Form } from "formik";
import Form1 from "./Form1";
import Form2 from "./Form2";
import Form3 from "./Form3";

export default function App() {
  const initialValues = { name: "", email: "", number: "" };
  const onSubmit = async (values, { setSubmitting }) => {
    console.log(" Final Values", values);
  };
  const [index, setIndex] = useState(0);

  const nextIndex = ()=>{
    setIndex(index+1);
  }
  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      {({ isSubmitting, values, setFieldValue }) => (
        <Form className="space-y-7">
          {
            index==0?<Form1 initialValues={initialValues} handleIndex={nextIndex}/>:
            index==1?<Form2 initialValues={initialValues} handleIndex={nextIndex}/>:
            <Form3 initialValues={initialValues} handleIndex={nextIndex}/>
          }
          <div className="flex flex-row-reverse">
            <button type="button">Continue</button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

现在，在每个 child 中使用 handleIndex 函数转到下一个表格！

Answer 3

你需要使用状态来控制它：https://codesandbox.io/s/elated-dawn-zlh5x?file=/src/App.js

export default function App() {
  const [formNumber, setFormNumber] = useState(0);
  const initialValues = { name: "", email: "", number: "" };
  const onSubmit = async (values, { setSubmitting }) => {
    console.log(" Final Values", values);
  };
  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      {({ isSubmitting, values, setFieldValue }) => (
        <Form className="space-y-7">
          {formNumber >= 0 && <Form1 initialValues={initialValues} />}
          {formNumber >= 1 && <Form2 initialValues={initialValues} />}
          {formNumber >= 2 && <Form3 initialValues={initialValues} />}
          <div className="flex flex-row-reverse">
            <button type="button" onClick={() => setFormNumber(formNumber + 1)}>
              Continue
            </button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

如何根据条件显示表单组件？

How to show form components based on conditions?

javascript

reactjs

formik