问题标签 [react-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 回答
124 浏览

reactjs - 如何在 React 中访问 JSX 组件方法?

我正在使用带有 react-final-form 的 FilePond。我不知道如何访问 FilePond 适配器的方法。FilePond 有一个我试图访问的getFiles方法。

我每次都收到以下信息:

TypeError:无法读取未定义的属性“getFiles”

0 投票
1 回答
2654 浏览

javascript - 如何在日期选择器事件中更改 React 最终形式的“字段”值?

我想创建一个日期范围字段,以便在单击输入字段时打开一个日期选择器组件并选择一个日期范围。我想用选定的范围填充输入字段。

到目前为止我做了什么:

我创建了一个由Field组件包装的输入字段。对于输入的值,我已将其设置为 this.state.DateRange。我将根据从 DatePicker 组件中选择的日期范围进行更改。

我想做的事:

我可以通过这种方法设置输入字段的值,但是当我按下提交时我无法获得该值。似乎尽管值已设置为输入,但它并未传递给表单 onSubmit(values)

0 投票
1 回答
3737 浏览

typescript - Typescript中的“无法调用类型缺少调用签名的表达式”?

我有一个 React-Final-Form 我想用它自己的类型输入它。但是 `children(renderRest)' 给出了以下错误:

无法调用其类型缺少调用签名的表达式。键入'字符串 | 号码 | 真实 | {} | ReactElement ReactElement 组件)> | 空) | (新(道具:任何)=> 组件)> | 反应节点数组 | 反应门户 | ((props: FormRenderProps) => ReactNode)' 没有兼容的调用签名.ts(2349)

我的代码是:

这个错误“无法调用类型缺少调用签名的表达式”在我能够解决的各种情况下发生。但不幸的是,这不是这个案子。

请问有什么提示吗?谢谢

0 投票
1 回答
678 浏览

reactjs - 即使我没有收到错误,React FilePond(功能组件)插件也不起作用?

我已经让 FilePond 作为 Final Form React 的孩子运行。我正在尝试将插件注册到其中,但它似乎不起作用。

我试过了console.log,它似乎没有返回任何东西。我也试图拒绝这个承诺,但没有任何效果。

0 投票
1 回答
2595 浏览

reactjs - 我们如何在使用反应最终形式时在组件中设置状态

我正在使用反应最终表单来验证我的表单并且它工作正常。我正在调用更改处理程序来设置输入字段状态,但似乎它没有设置状态。我们如何以反应最终形式实现它。

我试图将 onchange 处理程序作为道具传递,InputType但随后反应最终表单验证无法按预期工作

0 投票
1 回答
2198 浏览

reactjs - FormSpy-订阅脏的onChange未在输入字段中显示值

我们正在使用 FormSpy,订阅脏。当dirty为true时,FormSpy中的OnChange函数将更新redux中的dirty标签。当我输入任何输入字段时,第一个字母不会显示,但 redux 状态会dirty:true在第一个字母笔划时更新。

表单也使用不同的文件写入

这就是我们使用 FormSpy 的方式

if (isDirty)检查未完成时,它会不断更新存储值,但不会在输入字段中显示任何内容。我们哪里出了问题?

更新:我无法复制粘贴实际代码,但它是这样的。

动作.js

减速器.js

模态的.jsx

详细信息Form.jsx

当我在输入中输入“123”之类的内容时,只显示“23”。当我输入第一个数字时,它只会isDirty在商店中将标志变为真。在调试时,我发现 updateDirty 为输入的第一个字符调用了两次——一次isDirty为真,一次为假。

我在 FormSpy 的 onChange 中放置了一个控制台日志,它在初始表单加载期间被触发dirty为 false。当我输入第一个字母时,它会更新为 true,动作被调度,然后立即再次被触发为 false。然后不显示该字母。但从第二个字母开始,它表现正常。当我使用本地状态和 setState 而不是调度时,这没有任何问题。

当导航离开带有脏数据的页面时,我们使用该标志显示模式。

0 投票
2 回答
2940 浏览

reactjs - 如何为使用的数组设置初始/默认值?

我一直在用 react-final 形式创建一个表单。此表单有一些条件字段,仅在用户单击复选框时显示。如果选中该复选框,则呈现一个组件。

它与他们在文档中提供的示例非常相似,您可以在此处查看。https://codesandbox.io/s/kx8qv67nk5

我以该示例为基础,并且可以使用调用 push 方法的按钮将其添加到字段数组中,就像示例中一样。

我想做的不是必须按下按钮才能将该对象推入数组,而是让数组默认值已经包含一个对象。

换句话说,

在提供的示例中,数组开始为空,然后您将 push() 放入数组中,其中定义的字段

我怎样才能让它默认已经默认拥有一个对象而不是手动推送它?

我不确定该数组在哪里被定义或初始化。

0 投票
2 回答
2364 浏览

react-final-form - react-final-form 字段的动态名称

我有 2 个表格。当我在第一个表单上选择一个选项时,第二个表单将添加到页面中,其中包含从后端检索的参数。现在如何将参数名称设置为 react-final-form 字段名称?

我找不到办法做到这一点。在哪里传递参数名称?

0 投票
2 回答
2715 浏览

reactjs - 在 final-form-arrays 中为数组提供 initialValues 会导致状态更改以重置整个表单,我该如何防止这种情况发生?

我有一个使用 final-form-arrays 的表单。表单有效并且验证有效,但是,当我在组件内部进行状态更改时,它会重置我的所有值。

我能够使用 react-final-form-arrays 提供的相同示例复制该问题:

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

我添加了一个按钮来切换状态更改。本质上,只需尝试在表单中填写值,然后更改状态。表格将重置,我不知道为什么会这样。如果我删除 initialValues,这不会发生。

有谁知道为什么会这样?

0 投票
2 回答
1586 浏览

javascript - 有没有办法在反应最终形式中禁用嵌套字段名称功能?

在此处查看反应最终形式的文档

我正在研究一种显然由反应最终形式提供支持的形式。在表单组件中,我从 API 服务器获取数据,响应正文包括如下内容:

正如我们所看到的,在configs. react final 形式可以显示类似nameandvalue的值,但不能显示类似display.nameand的值,read.only因为它们的键中有一个点 -> .

我知道我可以.用下划线之类的东西来改变这些点(),它会起作用。但问题是我们的后端开发人员说,使用点 ( .) 来分隔键名在后端非常常见,因此无法选择用其他分隔符替换点。

我目前正在前端用下划线替换这些分隔符,但这种逻辑无处不在,我认为应该有更好的方法来解决这个问题。谢谢!