反应最终表单将附加参数传递给表单 State

Question

React Final Form uses a render prop pattern in its form component, and I am trying to understand how I can modify it to pass it additional arguments.

According to it's documentation, it passes the following props to the render function - including (crucially) the FormState .

Let's take a look at my particular implementation, focusing on the render function:

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

If I understand correctly, you will note I destruct the render prop object in the JSX {({})} and get the values from the FormState.

I then pass them to various modular form components below - like <Part_1_Of_Form/> in order to make each part of the form react to state changes in other parts of the form. But my problem is I want it to react to more than the values. For example, if I want to display a label conditionally based on if another label option (or another option) is selected in another part of the form, I can't access it because I only get access to the values - not the labels.

Example , with a currency selection tool to propagate throughout the form using state:

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

I can pass the value (let's say USD ) around other parts of the form, using the render props and the values part of that returned object - but I don't want to. I want to pass the symbol - the value (USD) belongs to the database (it's only USD because the DB wants it as a string like that) - but the other parts of the form should display the symbol instead of the value once I select my currency in the top part of the form.

Example of what I have to do now elsewhere in the form:

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

Example of what I want to do:

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

Or maybe even better:

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

So that each input that needs a price can show a currency in the appended label.

Does this usecase make sense?

Is there another way to pick up the symbol or a way to add it to the FormState? I think its probably bad for perf to pass something like allFormData around just to get one custom symbol. I can't use the symbol for the value because my backend developer will cry.

Answer 1

If I'm understanding you correctly, your value for part_one.currency needs to be the entire {value: 'USD', label: '$ (USD)', symbol: '$'} object.

Then you can do values.part_one.currency.symbol elsewhere in your form. If you only want the value to be 'USD' when you submit, you'll need to handle that in your onSubmit function. Does that help?