React Final Form将附加参数传递到Form State

Question

React Final Form在其表单组件中使用了一个render prop模式，我正在努力了解如何修改它以向它传递额外的参数。

根据它的文档，它将以下道具传递给呈现函数，包括(至关重要的(FormState。

让我们来看看我的具体实现，重点关注渲染函数：

<Form
onSubmit={() => {console.log("wow coolio you submitted a form!")}}
initialValues={initData}
validate={validateMyForm}
render={({ handleSubmit, reset, submitting, pristine, values }) => {
formSubmitHandler = async () => {
await handleSubmit()
return values
}
return(
//... form components with the values prop passed into them below
//...i.e. <Part_1_Of_Form values={values}/>

如果我理解正确，您会注意到我破坏了JSX{({})}中的渲染道具对象，并从FormState获取values。

然后，我将它们传递给下面的各种模块化表单组件，如<Part_1_Of_Form/>，以使表单的每个部分对表单其他部分的状态变化做出反应。但我的问题是，我希望它对值的反应更多。例如，如果我想根据表单的另一部分中是否选择了另一个标签选项(或另一个选项(来有条件地显示标签，我无法访问它，因为我只能访问值，而不能访问标签。

示例，使用货币选择工具使用状态在整个表单中传播：

<Field 
name="part_one.currency"
component={MyRFFInputSelectComponent}
options={[{value: 'USD', label: '$ (USD)', symbol: '$'}, {value: 'EUR', label: '€ (EUR)', symbol: '€'}]}
required={true}
className="form-control">
</Field>

我可以使用render道具和返回对象的values部分，在表单的其他部分传递值(比如USD(，但我不想这样做。我想传递symbol-值(USD)属于数据库(它只是USD，因为数据库希望它是这样的字符串(-但一旦我在表单的顶部选择了我的货币，表单的其他部分应该显示符号而不是值。

我现在必须在表单的其他地方做什么的示例：

<Field
...
append={values['part_one']['currency']}

我想做的事情的例子：

<Field
...
append={symbols['part_one']['currency']}

或者更好：

<Field
...
append={allFormData(notjustvalues)['part_one']['currency']['symbol']}

这样，每个需要价格的输入都可以在附加的标签中显示货币。

这个用例有意义吗？

有没有其他方法可以提取符号或将其添加到FormState？我认为传递allFormData之类的东西只是为了获得一个自定义符号可能对perf不利。我不能用这个符号来表示值，因为我的后端开发人员会哭的。😢

Answer 1

如果我理解正确，那么part_one.currency的值需要是整个{value: 'USD', label: '$ (USD)', symbol: '$'}对象。

然后，您可以在表单的其他地方执行values.part_one.currency.symbol。如果您在提交时只希望值为'USD'，则需要在onSubmit函数中进行处理。这有帮助吗？