如何使用onchange事件将已过滤的日期从第一个下拉组件传递到第二个下拉组件？

Question

我正在处理这个示例，其中有两个同级下拉组件。 页面加载时，我正在加载第一个组件数据。现在，当我在第一个下拉列表的onchange事件中选择一个或多个选项时，我想过滤第二个下拉列表中的数据。

1）如何传递经过过滤的数据onchange event 2）以及如何将过滤后的数据加载到第二个组件中？

import * as React from 'react';
import styles from './ListItems.module.scss';
import { IListItemsProps } from './IListItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import  {DropdownBasicExample} from './DropdownExample'
import { IDropdownOption, DropdownMenuItemType } from 'office-ui-fabric-react';
import { DropdownBasicExample2 } from './Dropdown2.Basic.Example';

export interface IListItemsState{
  selectedItems:IDropdownOption[];
  selectedSite:IDropdownOption;
}

export default class ListItems extends React.Component<IListItemsProps, IListItemsState> {
  private myWeb:IDropdownOption;

  constructor(props){
    super(props);
      this.state = {
        selectedItems:[],
        selectedSite:null
      }

  }

  private sites = [
    { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
    { key: 'A', text: 'Site a', title: 'I am Site a.' },
    { key: 'B', text: 'Site b' },
    { key: 'C', text: 'Site c' },
    { key: 'D', text: 'Site d' },
    { key: 'E', text: 'Site e' },
     { key: 'F', text: 'Site f' },
    { key: 'G', text: 'Site g' },
    { key: 'H', text: 'Site h' },
    { key: 'I', text: 'Site i' },
    { key: 'J', text: 'Site j' }
  ];

  private loadSites= (): Promise<IDropdownOption[]> => {
    return new Promise<IDropdownOption[]>((resolve: (sites: IDropdownOption[]) => void, reject: (error: any) => void) => {
      setTimeout(() => {
        resolve(this.sites);
      }, 1000);
    });
  }

  private webs = [
            { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
            { key: 'A', text: 'Web a', title: 'I am Web a.' },
            { key: 'B', text: 'Web b' },
            { key: 'C', text: 'Web c' },
            { key: 'D', text: 'Web d' },
            { key: 'E', text: 'Web e' },
            { key: 'F', text: 'Web f' },
            { key: 'G', text: 'Web g' },
            { key: 'H', text: 'Web h' },
            { key: 'I', text: 'Web i' },
            { key: 'J', text: 'Web j' }
          ];

  private loadWebs(): Promise<IDropdownOption[]> {
    return new Promise<IDropdownOption[]>((resolve: (Webs: IDropdownOption[]) => void, reject: (error: any) => void) => {
      setTimeout(() => {
        resolve(this.webs.filter(w => w.key.match("[ABCD]")))
      }, 1000);
    });
  }

  private onChanged = (item: IDropdownOption, index?: number): void => {

    console.log("textsome text: " + item.text);
    this.setState({
      selectedSite: item
    })
  }


  public render(): React.ReactElement<IListItemsProps> {
    const {selectedSite} = this.state;
    return (
      <div className={styles.listItems}>


      <DropdownBasicExample loadOptions={this.loadSites} onChanged={this.onChanged}   /> 

       <DropdownBasicExample2 loadOptions={this.loadWebs.bind(this)} onChanged={this.onChanged} />       

              <div id="showItems"></div>
              <div>selected Site {
              selectedSite ? selectedSite.key: "is empty"                
                }</div>
      </div>
    );
  }

}