Реакция окончательной формы использует шаблон поддержки рендеринга в своем компоненте формы, и я пытаюсь понять, как я могу изменить его, чтобы передать ему дополнительные аргументы.
Согласно документации, он передает следующие реквизиты в функцию рендеринга, включая (крайне важно) 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? Я думаю, что для перфоратора было бы плохо передавать что-то вроде allFormData, чтобы получить один собственный символ. Я не могу использовать символ для значения, потому что мой бэкэнд-разработчик будет плакать. ?