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

【问题标题】：How to show form components based on conditions?如何根据条件显示表单组件？
【发布时间】：2021-08-08 07:34:57
【问题描述】：

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

我也遇到了错误

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

因为表单中的表单，有没有办法在没有错误的情况下实现相同的目标

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

你需要使用一个状态来控制它：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>
  );
}

【讨论】：

你能帮我解决这个错误“
不能作为

的后代出现”
因为在另一个
中使用了

标签。更新它，警告就会消失
因为我只希望它以这种方式运行，我们不能在表单中使用表单吗？
我们可以使用。忽略警告
好的。有没有办法摆脱这个警告？

【解决方案2】：

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



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 个输入的单个表单。我相信那会更容易。

【讨论】：

【解决方案3】：

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

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>
  );
}

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

【讨论】：