问题标签 [react-final-form]

使用 Wizard form ant 试图了解如何在 {activePage}. 可以达到输入值Wizard.js但卡住Index.js有人知道我在哪里错过了重点吗？

使用来自React Final Form的Redux 示例的组件是在 .index.js

<FormStateFromRedux valueName="valueString" form="counter" />

它使用 redux 来跟踪值，使用prop-types它应该接收对象名称以返回确切的对象值：

手动设置对象路径时可以返回值，这里我想让可重用组件使用 PropTypes 返回值但不知道选择哪种类型。是否可以将值作为字符串传递？有人知道在这种情况下应该采取什么正确的方法吗？

更新

可以使用在对象内部获取字符串值[]

const FormStateFromRedux = ({ state, valueName }) => ( <p>{state.values[valueName]}</p> )

我想知道是否有一种方法可以使用 react-final-form 呈现带有初始错误的表单？

错误只是后端，因此前端无法验证该字段。

我的第一个想法是呈现表单并立即提交以显示错误。

我正在尝试设置react-boostrap-typeahead以从redux商店获取数据，并将预输入状态存储为react-final-form. 问题在于react-bootstrap-typeahead它附加了多个状态，这两个状态都需要跟踪才能使此设置正常工作。

1. 文本输入状态
2. 选择的选项

我解决此问题的首选方法涉及final-form-set-field-data并在此处进行说明： https ://codesandbox.io/s/rl81o5765o

该代码将无法正常工作，因为Form组件不知道字段数据的更改。有没有更好的方法来解决这个问题？

我正在尝试将react-day-picker'sDayPicker与react-final-form.

React Final Form 需要Field为每个表单字段使用一个，这意味着只要您希望第三方表单元素在表单中可用，就创建一个适配器组件。适配器组件必须接受一个input包含valueandonChange的对象。建议只是提供一个新的onChange.

这种适用于许多其他组件的方法不适用于DayPicker. 似乎问题在于DayPicker它实际上没有onChange方法，因此由我们来管理日历更改时会发生什么，然后将日期存储在期望的value属性中。react-final-form

我在这里创建了一个codepen：https ://codesandbox.io/s/github/pcraig3/date-picker-sandbox

我有一种handleDayClick方法，Calendar.js可以在单击天数时运行，但onChange不会始终为日历触发。

• selectedDays正在其Calendar自身内立即更新，但Form在日历未聚焦之前无法获得正确的日期
• 表单的validate方法只被调用一次（第一次选择一天），而每次更新原生文本输入值时都会调用它。

我希望表单值与日历的外部状态同步，并且每次单击/取消单击一天时都会触发 validate 方法。这有可能实现还是我做错了事？

当用户从输入中删除内容时，我希望在状态中具有空/空属性。

如果您在示例中看到当用户清除输入时状态为空。我使用状态来更新数据库上的数据，所以当代码用新数据更新旧数据时，值不会更新（没有属性！）。

示例：https ://codesandbox.io/s/3qvqnv6216

我找不到任何明智的方法将房产留在州内。

谢谢 ：）

我以 react-final-form 显示货币值。我在现场使用格式功能。

问题是货币是表格中的另一种选择。我没有看到一种干净的方法来访问格式函数中的其余值。

Redux-form "Field" 组件提供onChange 属性。每当从底层输入触发 onChange 事件时将调用的回调。此回调允许获取字段的“newValue”和“previousValue”。

React-final-form "Field" 组件没有这个属性。

那么，我怎样才能获得相同的功能呢？

我正在尝试在我的 React App 中使用 final-form-field-arrays 组件。当我尝试使用它时，我得到一个“验证器不是函数错误”。

我将其追溯到 final-form.es.js 中的 runFieldLevelValidation 函数

有问题的行是

记录字段后（如上所示），我发现 FieldArray 字段本身没有验证器函数，而是有一个 getValidator 函数。我给它打了补丁，它正在工作，但我认为这不应该是必需的

我有问题的反应代码是

关于如何在没有猴子补丁的情况下使其工作的任何想法？

我已经用 react-final-form 设置了一个联系表。问题是我真的不明白如何仅在所有字段都有效时才允许提交表单。

现在，我的表单会获取数据，并在字段为空或电子邮件地址无效时在字段下方显示错误。

作为我的 react-final-form 的基础，我使用了来自这个沙箱的代码。onSubmit我也不太明白in<Form/>和onSumbitin之间有什么区别<form>。

问题1.：如何仅当所有字段都有效时才允许handleSubmit？

问题 2.：这两个 onSubmit 属性有什么区别？

这是我的代码：