Javascript 反应多选层次结构

我有两个选择标签

• 选择一个

• 选择B

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

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

我环顾四周，在codesandbox和JSFIDLE中找到了类似的例子

---

我需要一些例子或一些如何解决它的技巧。我已经找到了。

重新更改您的

选择
并在那里声明一个函数。在该函数中，捕获选定的值。随着你状态的改变

export default class Chart extends Component {
  state = {
    list1: [...liga],
    list2: [...leagues]
    value: []
  };

 changeBDrop(event){
     var aVal = event.target.value;
     if (aVal === 'A') {
         this.setState({ value: // ur value })
     }else {
         this.setState({ value: // ur value })
    }

 };

  render() {
    return (
      <div>
        <div className="wrapper">
          <div className="main">
            <div className="container">
              <div className="row">
                <div className="col-xs-5 title-container" />
                <div className="col-xs-7 form-container">
                  Pick the League:
                  <select value={this.state.value} onChange={this.changeBDrop} >{listLeagues}</select>
                  <br />
                  League Teams to be selected
                  <select value={this.state.value} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

导出默认类图表扩展组件{
状态={
清单1:[…liga]，
清单2:[…联盟]
值：[]
};
changeBDrop（事件）{
var aVal=event.target.value；
如果（aVal=='A'）{
this.setState（{value://ur value}）
}否则{
this.setState（{value://ur value}）
}
};
render（）{
返回(
选择联盟：
{listLeagues}


联盟球队将被选中
);
}
}

这只是一个概念性的例子，它将帮助你理解你必须做什么。请看一看。基本上，您应该对数据进行一些重新构造，以便于访问（一个对象下的所有内容）。然后你需要跟踪哪个联赛被选中，哪个球队被选中。在每次联赛变更中，您都需要刷新球队列表（基本上是筛选所需球队），如下所示：

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

const getTeams=league=>
联盟和数据[联盟]
? 数据[联盟].map（名称=>(
{name}
))
: [];

当然，如果数据来自后端，您需要更改数据过滤结构，但我希望您能理解。对于初始状态，我使用
data
object中定义的第一个联盟，以及第一个与该联盟相对应的团队-当然，您可以更改该联盟的实施方式，以满足您的需要。
您的确切问题是什么？当您根据更新ur
this.state.value
从下拉列表a中选择一个值时，请创建一个事件列表并更改您的状态。我需要查看一个执行相同操作的示例或编辑我的状态codesandboxi发布了一个答案，它可能对我们有帮助。我唯一不太清楚的是：://league&&league！==如果调用getTeams（）或getTeams（“”），则只需返回空数组（0个团队）。也许更好的检查应该是联赛和数据[league]，以确保申请联赛的球队存在。