繁体   English   中英

Formik 表单未通过 onclick 更新

Formik Form not updating with onclick

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个自定义事件处理程序(单击按钮时),它根据下拉选择将数据注入嵌套数组中。 事件处理程序添加数据后,表单无法正确更新。 在表单的任何其他输入上调用任何其他事件处理程序将触发表单更新。 数据设置正确但表单在初始 onClick 事件后没有正确更新(见代码)

我有 enableReinitialize 集

https://codesandbox.io/s/updateissue-fy72h

import { useEffect, useState } from "react";
import { Formik, Form, Field, FieldArray, TextField } from "formik";

export default function Design() {
  const q = {
    questions: ["a", "b", "c", "d"],
    selectedLanguage: "nl",
  };
  const [questionnaire, setQuestionnaire] = useState(q);

  function addLanguageValue() {
    questionnaire.questions.push(questionnaire.selectedLanguage);

    setQuestionnaire(questionnaire);
  }

  return (
    <div>
      <Formik
        initialValues={questionnaire}
        enableReinitialize
        onSubmit={() => {}}
      >
        {({ values, handleChange }) => (
          <Form>
            <div>
              <Field as="select" name="selectedLanguage">
                <option value="fr">French</option>
                <option value="nl">Dutch</option>
                <option value="en">English</option>
              </Field>

              <button
                type="button"
                className="bg-gradient-to-b"
                onClick={(e) => {
                  addLanguageValue(values);
                }}
              >
                Add language
              </button>
            </div>
            <div>
              <FieldArray
                name="questions"
                render={(rootHelper) => (
                  <div>
                    {values.questions.map((value, j) => {
                      return <div>{value}</div>;
                    })}
                  </div>
                )}
              />
            </div>
          </Form>
        )}
      </Formik>
1 个回复

您正在改变状态对象,这会导致问题。 如果您在addLanguageValue创建一个新对象,它会按预期工作:

  function addLanguageValue() {
    setQuestionnaire({
      ...questionnaire,
      questions: [...questionnaire.questions, questionnaire.selectedLanguage]
    });
  }

沙盒示例

1 从 onClick 按钮更新 Formik 的状态

我有一个 Formik 表单,当我单击一个按钮时,我想更新表单的状态。 我试图更新initialValues但这将重置表单状态中的任何当前更改。 我可以将 Form 的状态复制到本地setState然后将其循环回initialValues但这感觉有点矫枉过正,因为 Formik 已经做到了。 ...

2 表单未通过onclick事件提交

我正在尝试在图像单击事件上提交表单,但是却遇到了Uncaught TypeError: Object #&lt;HTMLInputElement&gt; has no method 'submit'单击事件触发后, Uncaught TypeError: Object #&lt;HTMLInpu ...

3 提交类型按钮 onClick 覆盖 Formik 表单的表单提交

我有一个简单的表单,我有一个在表单之外提交它的按钮,问题是当我向同一个按钮提供额外的 onClicks 时,它会停止激活表单: 如果我保持这样,它会提交表单并且一切正常,但是如果我这样做: 然后它运行handleDone函数,但不再提交表单(意味着onSubmit={handleAddDep ...

4 D3数据未通过onclick函数更新

我已经使用D3构建了一个彩色地图,并希望进行下一步操作,即允许用户通过单击“年份”按钮按年份查看数据。 我已将onclick函数附加到每个按钮,并且此函数更新了displayYear变量。 我放入console.log以确保正确地更新了此变量。 但是,由于某些原因,我的地图永远不会更新,无 ...

6 Formik选择框不更新表单提交字段

我将Formik与React一起使用来处理我的Web应用程序表单。 当我尝试提交带有字段的任何表单时,它不包含该字段的正确选择值,而是默认值。 在下面的情况下,该元素对应于输入“ clientId”,当我选择一个客户然后提交表单时,Formik始终假定clientId为空字符串(默认 ...

7 表单提交/更新onclick

我必须重建一个表单,有两个按钮,一个用于增加输入的值,第二个用于减小值,并且如果我单击增加或减小,则必须删除提交按钮并始终更新表单,我已经尝试过jQuery onchange: 我也阅读过: http : //api.jquery.com/submit/ 我不能编辑表单,因为我只能 ...

8 Javascript表单更新Onclick

我正在制作一个允许用户提交数字的html表单。 我只是希望他们能够单击按钮来增加或减少文本输入中的数字,而不是让用户输入数字。 以下重要代码完全符合我的要求: 使用Javascript: HTML 我的问题是我希望能够为任何其他文本框(例如h2,h3等)使用“增加”和“ ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM