Question

我有两个选择标签

选择A
选择B

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

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

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

我需要一些例子或一些技巧来解决这个问题。我找到了。

Answer 1

对您的select进行onChange并在那里声明一个函数。在该函数内部捕获您选择的值。并根据您的状态变化

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

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

Answer 2

请查看this code。基本上，您应该稍微重组一下数据，以便于访问（所有内容都放在一个对象下）。然后，您需要跟踪选择了哪个联赛和选择了哪个球队。每次联赛变更时，您都需要像这样刷新您的球队名单（基本上是过滤所需的球队）：

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

当然，如果数据将来自后端，则需要更改数据过滤结构，但我希望您能理解。对于初始状态，我使用的是在data对象中定义的第一个联赛，并且使用了与该联赛相对应的第一支球队-当然，您可以根据自己的需要更改实现方式。

反应多选层次

2 个答案: