Доступ к значению родственных полей в компоненте реакционной формы

Question

У меня есть два поля выбора в форме с окончательной реакцией. Поле выбора содержит список "опций", которые нужно представить в раскрывающемся списке. Что я хотел бы сделать, так это убедиться, что параметры, доступные во втором раскрывающемся списке, "уменьшены" элементами, выбранными в первом раскрывающемся списке.

Так что для этого требуется второе раскрывающееся меню, чтобы узнать, какое значение было выбрано в первом раскрывающемся списке. Это концепция того, чего я пытаюсь достичь:

const fruitOptions = ['apple', 'orange', 'banana', 'grapes'];
<Field
  name = "morningTea"
  component = {SelectField}
  label = "Fruit for Morning Tea"
  options = {fruitOptions}
/>
<Field
  name = "afternoonTea"
  component = {SelectField}
  label = "Fruit for Afternoon Tea"
  options = {_.without(fruitOptions, morningTea)}
/>

Но я не вижу способа получить доступ к другим значениям поля в форме. Учитывая, что список "fruitOptions" не является собственным полем.

Answer 1

ОК, мне кажется, что это проблема с документацией - я подниму билет.

По сути, в документации просто не хватает того, что тип FormRenderProps также имеет реквизит "values". Отсюда, в компоненте, который декорирован формой реакции-финала, вы можете получить доступ к props.values ​​и оттуда передать значение в другие компоненты / поле.

Например

<Form
    render={formRenderProps => {
        const { morningTea } = formRenderProps.values;    
        const fruitOptions = ['apple', 'orange', 'banana', 'grapes'];
        <Field
          name = "morningTea"
          component = {SelectField}
          label = "Fruit for Morning Tea"
          options = {fruitOptions}
        />
        <Field
          name = "afternoonTea"
          component = {SelectField}
          label = "Fruit for Afternoon Tea"
          options = {_.without(fruitOptions, morningTea)}
        />
    }}
/>

Я также создал пример этого на Песочнице для любого, у кого есть тот же самый вопрос.

Answer 2

Вы можете сделать это, если сможете получить значение параметра в поле "morningTea". Предполагается, что значение сохраняется как "morningTea.value".

Вы можете передать следующие параметры:

 <Field
   name = "afternoonTea"
   component = {SelectField}
   label = "Fruit for Afternoon Tea"
   options = {fruitOptions.filter(option => option != morningTea.value)}
 />

Я предположил это через эту концепцию:

 const q = [1,2,3,4,5]
    console.log(q) = "[1,2,3,4,5]"
const y = q.filter(w => w != 1 )
    console.log(y) = "[2,3,4,5]"