反应多 select 层次结构

Question

我有两个 select 标签

Select一个
Select B

我希望 Select B 中的值根据 Select 中编辑的值 select 进行填充A.

我已经复制了一个小例子 here 用户必须在 Select A 和 [= 中选择联赛43=] B 他要接联赛的球队 selected in Select A.

我在 codesandbox 和 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 对象中定义的第一个联赛，以及与该联赛相对应的第一个球队 - 当然，您可以根据需要更改其实施方式。

反应多 select 层次结构

React multi select hierarchy

javascript

drop-down-menu

reactjs

react-select