Question

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

根据其文档，passes the following props属于渲染功能-包括（至关重要）FormState。

让我们看一下我的特定实现，重点介绍render函数：

<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>

我可以使用渲染道具和返回对象的USD部分，将值（例如values）传递给表单的其他部分-但我不想这样做。我想传递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之类的东西以获得一个自定义符号可能是不好的。我不能使用符号作为值，因为我的后端开发人员会哭泣。 ?

Answer 1

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

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

对最终表单传递附加参数以形成表单状态

1 个答案: