为什么使用 NextJS 不从表单提交动态值？

Question

我正在研究基于 NextJS 代码的 React。

如果我在表单字段中手动输入值并提交表单，我会在组件函数中获取所有值。

但是如果我在像 value={query.campaignid} 这样的表单字段中动态显示值，该组件不会收集任何值。

import { Button, Input } from "@chakra-ui/react";
import { Field, Form, Formik } from "formik";

import { useRouter } from "next/router";

export default function FormikExample() {
  const { query } = useRouter();

  return (
    <>
      <Formik
        initialValues={
          {
            // campaignid: " ",
          }
        }
        onSubmit={(values) => {
          setTimeout(() => {
            console.log(values);
          });
        }}
      >
        {(props) => (
          <Form>
            <Field name="campaignid">
              <Input value={query.campaignid} />
            </Field>

            <Button id="submited" isLoading={props.isSubmitting} type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </>
  );
}

Answer 1

已解决！

我将 URL 查询传递给 initialValues 并在下面添加了 enableReinitialize={true}：

...
     initialValues={{
        campaignId: query.campaignid,         
     }}
     enableReinitialize={true}
...

在输入值中我传递了那些道具：

 <Field name="campaignid">
       <Input value={props.values.campaignId} />
  </Field>

为什么使用 NextJS 不从表单提交动态值？

Why dynamic values are not being submitted from form with NextJS?

javascript

reactjs

next.js

formik

chakra-ui