如何根据先前选择的值更改下拉选项？

【问题标题】：How to change dropdown options based on value selected previously?如何根据先前选择的值更改下拉选项？
【发布时间】：2019-02-18 11:07:45
【问题描述】：

我正在将 tcomb 包用于表单 https://github.com/gcanti/tcomb-form-native 我有 2 个下拉菜单，即我创建了 2 个枚举。现在第一个下拉列表，即枚举在下拉列表中有 3 个选项 A、B、C。现在，如果用户从第一个枚举中选择选项 A，那么在第二个枚举中，当且仅当从下拉列表中选择选项 A 时，它应该显示 P、Q、R 作为第二个枚举的这 3 个下拉选项。现在，如果选择了选项 B，则第二个枚举应选择 X、Y、Z，类似地，如果从第一个枚举的下拉列表中选择选项 C，则应显示 L、M、N 选项。

那么如何根据之前选择的选项动态更改枚举字段？

【问题讨论】：

您找到解决方案了吗？答案对我不起作用。

标签： reactjs react-native tcomb-form-native

【解决方案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 函数中，根据 field1 的值更改 field2 的下拉列表，如下所示：

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

【讨论】：