React 最终表单将附加参数传递给表单状态答案

【问题标题】：React Final Form Pass Additional Parameters to Form StateReact 最终表单将附加参数传递给表单状态
【发布时间】：2020-02-20 05:16:42
【问题描述】：

React Final Form 在其表单组件中使用render prop pattern，我试图了解如何修改它以传递额外的参数。

根据它的文档，它 passes the following props 到渲染功能 - 包括（至关重要的）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 {({})} 中破坏了 render prop 对象，并从 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>

我可以使用渲染道具和返回对象的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 中？我认为 perf 为了获得一个自定义符号而传递 allFormData 这样的东西可能很糟糕。我不能使用符号来表示值，因为我的后端开发人员会哭。 ????

【问题讨论】：

标签： javascript reactjs react-final-form

【解决方案1】：

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

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

【讨论】：