问题标签 [react-final-form]

我想使用来自Material-UI的 TextField和react-final-form ( https://github.com/final-form/react-final-form )。

主要问题是“如何获得values对象？”

我无法从 TextField 中获取它。

结果是：

我已经尝试过不同的例子，但没有任何效果。

我的代码：

版本：

我正在尝试将日期选择器添加到我的论坛。问题是日期选择器只能通过组件状态工作。意味着选择的值进入状态。

我正在尝试强制最终表单字段使用该状态值。但我似乎无法弄清楚。

基本上试图这样做：

似乎我无法掌握React-final-form 的工作原理。

有一个具有以下部分的功能组件： 在顶部：

然后在返回中：

因此，渲染是一个传递对象的函数。在那个对象中，第一个是“innerSubmit”。

innerSubmit 是如何连接到“handleSubmit”的？

对象中的这些值是什么（innerSubmit、form、submitting、pristine 和 values）。React.dom 中的 render 函数（render 来自哪里）有不同的参数。

我正在尝试在子组件中将 React-final-form 与 DropDown 一起使用。无法让这个工作。

我所有的文本字段都已经在一个子组件中，这就像一个魅力。父项中的字段如下所示：

子组件如下所示：

“Form.Field”和“Label”来自语义-ui-react

但现在我想对 DropDown 做同样的事情。标准的 DropDown，取自 React-Final-Form 站点上的示例，如下所示：

从某种意义上说，我在我的 react-final-form 值 onSubmit 中获得了价值。然后我试图将 Dropdown 本身卸载到子组件（目的是使用语义-ui-react 版本的 Dropdown，但首先要让 Dropdown 工作:-)）

父组件：

在子组件中：

结果是 HTML 看起来相同（我猜这并没有说太多），在值中选择了 ToppingsA（在 onSubmit 上），而 ToppingsB 不是。我无法弄清楚我在这里缺少什么，非常感谢您的帮助。

在此先感谢，伯特

如何以反应最终形式制作浮动输入？我喜欢这样：

但是我可以输入字母，当我输入它1.的字符串时，我需要浮点数

你好我有一些问题

按照这个简单的例子：https ://codesandbox.io/s/ww40y2m595

如何使 Field Sauces (checkbox) 只是 Field Best Stooge(radio) 的一种选择？

****** Field Sauces 仍然使用输入类型 = 复选框 ************

ex.我尝试了一些方法，例如使用 mutators 函数来更改值，但仍然无法正常工作

我想在 react-typescript 环境中创建一个反应最终形式。我收到一个错误，我在“ FormProps ”所需的 {...} 类型中缺少“ onSubmit ”属性。我检查了界面，但无法弄清楚为什么会出现此错误，因为我已经设置并定义了该属性。

我的文件.tsx

index.d.ts（反应最终形式） - FormProps => Config => ...onSubmit

我正在使用 Axios 从 React 客户端登录 api 服务。名称和密码的形式由 处理final-form。一切都按预期工作，除非我想从onSubmit函数返回错误。

有两个组件：一个 parent Login，它使用一个函数处理对 API 的调用logIn，一个嵌套组件LoginUi，它具有表单和一个函数，它通过以下onSubmit方式调用 parent 方法：logInthis.props.logIn()

这里logIn父Login组件中的方法：

这里onSubmit是子LoginUi组件中的方法：

{ [FORM_ERROR]: 'Login Failed' }负责改变表单的状态——由final-form——处理，但它没有这样做。如果我将它退回外面catch，它可以工作：

但显然这不是我想要的，因为[FORM_ERROR]: 'Login Failed'只有在 API 调用返回错误时才必须返回。

我很确定在这里使用承诺是一个问题。如果有人有任何想法，我将不胜感激！

谢谢！

我遇到的错误非常令人困惑，以至于我不知道在哪里寻找解决方案，而且这些错误令人担忧，因为它们似乎隐藏在图书馆的深处。
我正在使用样板应用程序 ( react-boilerplate) 和表单库 ( react-final-forms, react-final-form-arrays) - 导入时会导致错误和奇怪的行为。可重现的步骤如下。

1. 从应用程序正常运行的状态：
2. import { FieldArray } from 'react-final-form-arrays'到我的主页
3. 热重载时，主页重新渲染失败，因此页眉和页脚显示但主页不重新渲染，但控制台上没有错误。如果刷新页面，结果相同
4. 导航到另一个页面，然后导航回主页——现在使用路由器——这会引发错误（注意页面上尚未使用导入）：

react.development.js?72d0:207 警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。

检查LoadableComponent. 在 LoadableComponent（由 Route 创建） 在 Route（由 App 创建） 在 Switch（由 App 创建） 在 div（由 Context.Consumer 创建） 在 StyledComponent（由 App__AppWrapper 创建） 在 App 中 在 Router（由 ConnectedRouter 创建） 在 ConnectedRouter（由创建by Connect(ConnectedRouter)) in Connect(ConnectedRouter) in IntlProvider (由 LanguageProvider 创建) 在 LanguageProvider (由 Connect(LanguageProvider) 创建) in Connect(LanguageProvider) 在 Provider

5. 删除导入，一切恢复正常。

围绕花括号导入的问题通常被回答为命名导入和默认导入之间的区别一样简单。显然这里的事情更复杂。（我都试过了，但它肯定应该被命名）。问题与加载脚本有关吗？

我正在尝试通过参考此代码https://codesandbox.io/s/km2n35kq3v使用 react-final-form 创建向导表单。对于我的用例，我需要在表单字段中使用一些 mutator 函数。这个例子说明了如何做到这一点 - https://codesandbox.io/s/kx8qv67nk5?from-embed。当我使用向导表单而不是单页表单时，我不确定如何在表单步骤中访问 mutator 函数。

我尝试通过修改<Form>由 Wizard.js 呈现的组件以传递突变器来组合这两个示例。但是，我无法在向导表单页面中访问这些变量。

在 Wizard.js 中

另一个文件 index.js

它出错了 - 在 index.js 中删除未定义