javascript - react 多选层次结构

Question

我有两个选择标签

• 选择A

• 选择B

我希望根据在Select A中选择的值填充Select B中的值。

我复制了一个小例子here用户必须在Select A中选择一个联赛，在Select B中他必须选择在Select A中选择的联赛球队.

我在 codesandbox 和 jsfiddle 中四处寻找类似的例子。

我需要一些示例或一些提示来解决问题。我找到了。

Answer 1

请看this code .基本上，您应该对数据进行一些重组以便于访问(所有内容都在一个对象下)。然后你需要跟踪选择了哪个联赛，选择了哪支球队。在每次联赛更改时，您需要像这样刷新您的球队列表(基本上是过滤所需的球队):

const getTeams = league =>
  league && data[league]
    ? data[league].map(name => (
        <option key={name} value={name}>
          {name}
        </option>
      ))
    : [];

当然，如果数据要来自后端，您将需要更改数据过滤结构，但我希望您明白这一点。对于初始状态，我使用在 data 对象中定义的第一个联赛，以及与该联赛相对应的第一个球队 - 当然，您可以根据需要更改其实现方式。