javascript - 反应多选层次结构

Question

我有两个选择标签

• 选择一个

• 选择 B

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

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

我环顾四周，在 codeandbox 和 jsfiddle 中找到了类似的例子。

我需要一些例子或一些关于如何弄清楚的提示。我找到了任何。

Answer 1

请看一下这段代码。基本上，您应该对数据进行一些重组以便于访问（一个对象下的所有内容）。然后您需要跟踪选择了哪个联赛以及选择了哪个球队。在每次联赛更改时，您都需要刷新您的团队列表（基本上是过滤所需的团队），如下所示：

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

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

Answer 2

对你采取 onChangeselect并在那里声明一个函数。在该函数内捕获您选择的值。并根据那个改变你的状态

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

这只是一个概念示例，它将帮助您了解您必须做什么