问题标签 [final-form]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
3500 浏览

javascript - 我如何管理 React Final Form 之外的状态?

我想将我的 React Final Form 的状态存储在某个地方。现在它在一个 React Hook 中。我目前正在使用useMethods,类似于useState

我目前拥有的表单是多步骤过程的一部分,当我导航到表单不在的另一个页面时,它会被卸载(当然)。重新安装时,我想为表单提供初始值(可在此处获得)。

问题是,当我的状态改变时,表单会重新渲染,我总是陷入无限循环,因为:

  • FormSpy商店形式的变化
  • 状态变了
  • 表单被重新渲染
  • FormSpy商店形式的变化
  • 等等...

我还有一个问题,当提供初始值时,字段状态未填充(脏、触摸等),因此重新安装时表单看起来很奇怪,因为某些标签与元字段相关联。似乎我们需要某种方式来存储所有表单状态,而不仅仅是包含Form可以卸载和重新安装n次的组件的值。

我想要的是:

  • 更改为立即存储在我的状态
  • 重新渲染以某种方式记住(如果需要,我可以将其存储在我自己的状态中)触摸、脏等状态

我的出发点是查看带去抖动的自动保存(尽管我不需要去抖动,因为我将它存储在本地)。

处理这个问题的最佳方法是什么?

0 投票
1 回答
2687 浏览

reactjs - 设置“multiple”时,出现错误下拉“value”必须是一个数组

我收到此错误

multiselect dropdown在语义用户界面反应中使用。当我运行我的应用程序时出现错误

设置时下拉列表value必须是一个数组multiple

这是我的代码 https://codesandbox.io/s/optimistic-field-56zpm

在此处输入图像描述

API

https://react.semantic-ui.com/modules/dropdown/#types-clearable-multiple

0 投票
2 回答
426 浏览

reactjs - 如何在反应中休息或清空输入字段?

我正在使用react-final-form库 .so ,其中有一个复选框,单击复选框时会显示 textfield 。用户可以在文本字段中输入文本。但如果您在文本字段中uncheck the checkbox保留文本。

重现此错误的步骤

选中复选框

在输入字段中输入“abc”文本

取消选中复选框

再次选中复选框。Textfied 保留abc文本。

https://codesandbox.io/s/optimistic-field-56zpm 在此处输入图像描述

https://github.com/final-form/react-final-form

0 投票
3 回答
1959 浏览

reactjs - 如何去抖动最终形式的字段?

这是一个很常见的查询,但我对新final-form库有点困惑。我曾经使用过,redux-form但这个新版本太不一样了。

我的需求很简单,我想在用户写一些文本时分派搜索,但我想throttle在字段中添加一个。

这是 lib 的第一次尝试react-final-form-listeners,但正如您将看到的,当您在文本字段中写入时,去抖动不起作用:/

https://codesandbox.io/embed/react-final-form-simple-example-khkof

0 投票
2 回答
1211 浏览

javascript - 如何在反应中获取文本区域的值?

我正在使用react-final-form并且TextareaAutosize在我的示例中。我试图获得价值text-area但无法做到这一点。我能够获得input字段的价值,但不能textarea

这是我的代码 https://codesandbox.io/s/react-final-form-simple-example-rd3rc

API 链接 https://final-form.org/docs/react-final-form/examples/simple

https://www.npmjs.com/package/react-textarea-autosize

0 投票
1 回答
1776 浏览

javascript - 为什么模糊事件不会在对 textarea 的反应中触发?

你能告诉我为什么模糊事件不会对 textarea 做出反应吗?

实际上,在我的演示中,我有一个输入并且 Textarea.i 在两个字段中都添加了模糊事件。在输入字段中,它触发了,但在 textarea 上,它没有为什么?

这是我的代码 https://codesandbox.io/s/react-final-form-simple-example-xknkd

0 投票
1 回答
2139 浏览

reactjs - 为什么必需的字段验证在使用反应的形式中不起作用?

嗨,我正在使用react-final-form.I 进行表单验证。我也从这个例子中获得帮助 https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from -embed 当我单击submit按钮时,我正在尝试做同样的事情,如果该字段是必需的,它将显示Required错误。

目前,在我的演示中,它没有显示这个

这是我的代码 https://codesandbox.io/s/quizzical-hellman-65dy3

有什么方法可以显示所需的消息吗?

0 投票
2 回答
7263 浏览

javascript - 如何使必填字段动态反应?

你能告诉我如何动态地制作一个必填字段吗?

我有两个字段firstNamelastName. 名字是必需的。如果我输入firstName,我想lastName成为必填字段test

可能吗?

这是我的代码 https://codesandbox.io/s/unruffled-pike-5k7jn

test只有当用户输入名字字段时,我才能使第二个字段成为必填项吗?

API链接

https://final-form.org/docs/react-final-form/examples

要查看它不起作用,请重现以下步骤:

1) 点击提交按钮。它显示名字是必需的。

2) 在名字字段中输入测试文本。

3) 再次按下提交按钮。

它没有显示所需的错误。为什么?

0 投票
1 回答
1198 浏览

reactjs - 如何在不重置最终形式值的情况下更改组件状态?

我有一个组件,其中包含一个用 react-final-form 制作的表单;所有输入字段都可以正常工作,就像在我的所有其他表单中一样,但是,我有一个自定义输入,我需要更改组件的状态,然后在 handleSubmit 中我将该值添加到表单数据中。这基本上是一个自定义输入。

但是,当我更新组件的状态时,只要状态更新,它就会重置其他输入字段中的任何用户输入。为什么要这样做,或者我在这里缺少什么以便更改组件状态不会重置其他输入中的值?我知道我以前见过它工作,但我无法区分。

这是我的表格的简化版本

预期的行为是让用户更改组件状态而不重置他们已经在其他字段中输入的任何内容。

0 投票
1 回答
53 浏览

javascript - 为什么单击十字按钮时无法清除字段?

您能告诉我为什么单击十字按钮无法清除该字段吗?

这是我的代码

https://codesandbox.io/s/cool-torvalds-lhe9d 并且值未设置为final-form为什么?

单击十字按钮时,我面临两个values不清楚的问题。其次值是在表单中设置的。为什么?

最终形式 https://github.com/final-form/react-final-form