提交后，从最终JSON中删除隐藏的字段

Question

我使用Formik构建了一个简单的表单。我的情况是，在我选择Radio Buttun“否”之后，一个领域就被隐藏了。 但是，如果我输入该字段的价值，然后选择“否”隐藏它，然后提交表格，我将在最终的JSON中获得隐藏字段的值。 我的期望是，当字段未显示到屏幕时，将其从最终的JSON中删除。

我的表格：

import React from "react";
import { Formik } from "formik";
import { Form } from "react-bootstrap";

import { Radio } from "antd";

const CustomFormik = () => {
  return (
    <>
      <Formik
        initialValues={{
          input1: null,
          radio: null,
          input2: null
        }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {(formik) => (
          <>
            <Form
              onSubmit={formik.handleSubmit}
              className="custom-formik-container"
            >
              <Form.Group>
                <span>input1: </span>
                <Form.Control
                  id={"input1"}
                  name={"input1"}
                  {...formik.getFieldProps("input1")}
                />
              </Form.Group>

              {formik.getFieldProps("radio").value !== 2 && (
                <Form.Group>
                  <span>input2: </span>
                  <Form.Control
                    id={"input2"}
                    name={"input2"}
                    {...formik.getFieldProps("input2")}
                  />
                </Form.Group>
              )}

              <Form.Group>
                <span>radio: </span>
                <Radio.Group {...formik.getFieldProps("radio")}>
                  <Radio value={1}>yes</Radio>
                  <Radio value={2}>no</Radio>
                </Radio.Group>
              </Form.Group>
            </Form>

            <button
              style={{
                width: 200,
                height: 30,
                background: "#113776",
                color: "#fff"
              }}
              onClick={() => formik.handleSubmit()}
            >
              S U B M I T
            </button>
          </>
        )}
      </Formik>
    </>
  );
};
export default CustomFormik;

例如，输入： “ ABC”到第一个输入。 “ EFG”到第二个输入。 “否”收音机按钮。

Console.log中的最终JSON将是：

{input1: "abc",input2: "efg", radio: 2}

但是我期望为：

{input1: "abc", radio: 2}

codesandbox

谢谢你们！

Answer 1

提交属性之前删除属性

我不知道这是否适合您的需求，但是我在项目中使用redux-form也有类似的情况，而我所做的就是在这样

    onSubmit={(values) => {
      if (values.radio === 2) {
        let clonedValues = { ...values };
        delete clonedValues.input2;

        console.log(clonedValues);
      } else {
        console.log(values);
      }
    }}

Answer 2

这将完成这项工作。

        onSubmit={(values) => {
      if(values.radio === 2){
        delete values['input2'];
      }
      console.log(values);
    }}