事件没有触发，React组件之间的通信问题

请原谅我的幼稚，但我对React相当陌生，并且我遇到了一些障碍。我需要在两个相关组件之间进行通信。我有一个"下拉"组件，它代表一个选项元素(实际上是一个div)，我需要它的值来导致不同组件的状态改变。该下拉菜单基本上应该将类别设置为第二个组件的状态，该组件将根据类别显示不同的内容。我尝试了几种方法来处理这个问题，但收效甚微。目前，我正试图使用EventListeners来处理此问题，但这似乎也不起作用。

下面是我当前的代码，现在设置的方式，我得到一个错误说:

"。

dispatchEvent不是函数。

如果有人能帮我解决这个问题并继续前进，我将非常感激。或者，如果这是一个不好的处理方法，我非常愿意接受建议。

var GridView = React.createClass({
  getInitialState: function() {
    window.addEventListener("scroll", this.handleScroll);
    return {
      data: [],
      page: 0,      //for pagination
      loadingFlag: false,
    };
    },
  getMainFeed: function() {
...
   }, //end function
   getMoreItems: function() {
...
 }, //end function
 getFilteredItems: function() {
...
}, //end function
  componentWillMount: function() {
  },
  listenForEmailChange: function() {
    window.addEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  componentWillUnmount: function() {
    window.removeEventListener("selectedFilterChange", this.handleFilterChange, false);
  },
  handleFilterChange: function(filter) {
   //Convert Data for getFilteredItems
   switch (filter.detail.filterType) {
    case 'category':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
    case 'event':
      this.setState({
        eventType: filter.detail.filterSelected,
      });
      break;
    case 'type':
      if (0){
        this.setState({
          filterBuy: 1,
          filterInspiration: 0,
        });
      }
      if (1){
        this.setState({
          filterBuy: 0,
          filterInspiration: 1,
        });
      }
      if (2){
        this.setState({
          filterBuy: 1,
          filterInspiration: 1,
        });
      }
      break;
    case 'trending':
      this.setState({
        itemCategory: filter.detail.filterSelected,
      });
      break;
   }
//   this.getFilteredItems();
 },
  componentDidMount: function() {
    //loading("on");
    this.getMainFeed();
    MasonryInit();
    this.listenForEmailChange();
  },
  handleScroll:function(e){
    //this function will be triggered if user scrolls
    ...
  },
  componentDidUpdate: function() {
    $('#grid-container').imagesLoaded( function() {
    $('#grid-container').masonry('reloadItems');
    $('#grid-container').masonry('layout');
    });
  },
  render: function() {
      return (
        <div id="feed-container-inner">
          <GridMain data={this.state.data} />
        </div>
      );
    }
  });

      var Dropdown = React.createClass({
        sendFilter: function(item) {
          dropdownChange = new CustomEvent("selectedFilterChange", {
            detail: {
              filterType: this.props.filterSelector,
              filterSelected: item.id,
            }
          });
          window.dispatchEvent(dropdownChange);
        },
        getInitialState: function() {
          return {
            listVisible: false,
            display: ""
          };
        },
        select: function(item) {
          this.props.selected = item;
          this.sendFilter(item);
        },
        show: function() {
          this.setState({ listVisible: true });
          document.addEventListener("click", this.hide);
        },
        hide: function() {
          this.setState({ listVisible: false });
          document.removeEventListener("click", this.hide);
        },
        render: function() {
          return <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
            <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}>
              <span>{this.props.selected.name}</span>
              <i className="fa fa-angle-down"></i>
            </div>
            <div className="dropdown-list">
              <div>
                {this.renderListItems()}
              </div>
            </div>
          </div>;
        },
        renderListItems: function() {
          var categories = [];
          for (var i = 0; i < this.props.list.length; i++) {
            var category = this.props.list[i];
            categories.push(<div onClick={this.select.bind(null, category)}>
              <span>{category.name}</span>
              <i className="fa fa-check"></i>
            </div>);
          }
          return categories;
        }
      });
  var GridFilter = React.createClass({
    getInitialState: function() {
      return {
        categoryList: [{
          name: "Loading Categories"
        }],
        eventList: [{
          name: "Loading Events"
        }],
        typeList: [{name: "Inspiration + Shoppable", id: 0}, {name: "Inspiration", id: 1}, {name: "Shoppable", id: 2}
        ],
        trendingList: [{
          name: "Loading Trending"
        }]
     };
    },
    getCategories: function() {
...
     }, //end function
     getEvents: function() {
...
      }, //end function
      getTrending: function() {
        ...
       }, //end function
    componentDidMount: function() {
      this.getCategories();
      this.getEvents();
      this.getTrending();
    },
    render: function() {
      return (
        <div id="filter-bar" className="stamp">
          <Dropdown filterSelector={'category'} list={this.state.categoryList} selected={this.state.categoryList[0]} />
          <Dropdown filterSelector={'event'} list={this.state.eventList} selected={this.state.eventList[0]} />
          <Dropdown filterSelector={'type'} list={this.state.typeList} selected={this.state.typeList[0]} />
          <Dropdown filterSelector={'trending'} list={this.state.trendingList} selected={this.state.trendingList[0]} />
          <p className="filter-text">Filters:</p>
        </div>
      );
    }
  });

  select: function(item) {
    this.setState({selected: item });
    if(this.onSelect) {
        this.onSelect(/* pass args here */);
    }
  }