Доступ к значению родственных полей в компоненте response-final-form

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

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

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" не является отдельным полем.


react-final-form final-form
person Simon Steele    schedule 07.02.2018    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

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

E.g.

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

Я также создал пример этого в Sandbox для всех, у кого есть такой же вопрос.

person Simon Steele    schedule 07.02.2018

arrow_upward
0
arrow_downward

Вы можете сделать это, если можете получить значение параметра в поле «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]"
person xSkrappy    schedule 07.02.2018
comment
Спасибо за ваш ответ - к сожалению, у меня возникли проблемы с получением доступа к значению параметра в поле morningTea - это не так просто, как morningTea.value, как кажется! Думаю, я все равно нашел ответ ... см. Следующий комментарий. - person Simon Steele; 07.02.2018