Как изменить параметры выпадающего меню на основе значения, выбранного ранее?

Question

Я использую пакет tcomb для форм https://github.com/gcanti/tcomb-form-native У меня 2 выпадающих списка, т.е. я создал 2 перечисления. Теперь 1-й выпадающий список, т. Е. Enum имеет 3 варианта A, B, C в выпадающем списке. Теперь, если пользователь выбирает опцию A из 1-го перечисления, то во 2-м перечислении должны отображаться P, Q, R в качестве этих 3 выпадающих опций для 2-го перечисления, если и только если опция A выбрана из выпадающего списка. Теперь, если выбрана опция B, во втором перечислении должны быть опции X, Y, Z аналогично, если опция C выбрана из выпадающего списка из первого перечисления, тогда должны быть показаны опции L, M, N.

Итак, как я могу динамически изменять поля перечисления на основе выбранной ранее опции?

Answer 1

Может быть, это помогает и другим. Один из способов добиться этого - использовать переменные tcomb из состояния, например

this.state = {
  field1: t.enums({'A':'AA', 'B':'BB', 'C':'CC'},'field1'),
  field2: t.enums({},'field2')
}

let MyForm = t.struct({
  field1: this.state.field1,
  field2: this.state.field2
)}

и в вашей функции onChange вы изменяете раскрывающийся список field2 в зависимости от значения field1 следующим образом:

onChange(value) {
 if (value.field1 == 'A')
  this.setState(field2: t.enums({'P':'PP','Q':'QQ','R':'RR'}, 'field2')
 else if (value.field1 == 'B')
 ...
}

наконец, в вашей функции рендеринга вы пишете:

<Form type={MyForm} onChange={this.onChange} />