React Final Form использует отрисовка шаблона 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 {({})} и получаю values из FormState.
Затем я передаю их различным компонентам модульной формы ниже - например, <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 только для того, чтобы получить один пользовательский символ. Я не могу использовать символ для значения, потому что мой внутренний разработчик будет плакать. ????
