Javascript 事件未触发，React组件之间存在通信问题

请原谅我的幼稚，但我还没有反应过来，我遇到了一点小麻烦。我需要在两个相关组件之间进行通信。我有一个“下拉”组件，它表示一个选项元素（实际上是一个div），我需要它的值来引起另一个组件的状态更改。下拉列表基本上应将类别设置为第二个组件的状态，该组件将根据类别显示不同的内容。我尝试了几种方法来处理这个问题，但收效甚微。目前我正在尝试使用EventListeners来处理这个问题，但这似乎也不起作用

下面是我当前的代码，按照现在的设置方式，我收到一个错误，上面写着“this.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>
      );
    }
  });

var GridView=React.createClass({
getInitialState:函数（）{
window.addEventListener（“滚动”，this.handleScroll）；
返回{
数据：[]，
页面：0，//用于分页
加载标志：false，
};
},
getMainFeed:function（）{
...
}，//结束函数
getMoreItems:函数（）{
...
}，//结束函数
getFilteredItems:函数（）{
...
}，//结束函数
componentWillMount:function（）{
},
listenForEmailChange:function（）{
window.addEventListener（“selectedFilterChange”，this.handleFilterChange，false）；
},
componentWillUnmount:function（）{
window.removeEventListener（“selectedFilterChange”，this.handleFilterChange，false）；
},
handleFilterChange:功能（过滤器）{
//转换getFilteredItems的数据
开关（filter.detail.filterType）{
个案‘类别’：
这是我的国家({
itemCategory:filter.detail.filterSelected，
});
打破
“事件”案例：
这是我的国家({
eventType:filter.detail.filterSelected，
});
打破
案例“类型”：
如果（0）{
这是我的国家({
过滤器买方：1，
过滤呼吸：0，
});
}
如果（1）{
这是我的国家({
filterBuy:0，
过滤呼吸：1，
});
}
如果（2）{
这是我的国家({
过滤器买方：1，
过滤呼吸：1，
});
}
打破
案例“趋势分析”：
这是我的国家({
itemCategory:filter.detail.filterSelected，
});
打破
}
//这个.getFilteredItems（）；
},
componentDidMount:function（）{
//装载（“装载”）；
这个.getMainFeed（）；
masonrynit（）；
this.listenForEmailChange（）；
},
handleScroll:函数（e）{
//如果用户滚动，将触发此功能
...
},
componentDidUpdate:函数（）{
$（“#网格容器”）.imagesLoaded（函数（）{
$（“#网格容器”）.mashine（'reloadItems'）；
$（“#网格容器”）。砌体（“布局”）；
});
},
render:function（）{
返回(
);
}
});
var Dropdown=React.createClass({
sendFilter:函数（项）{
dropdownChange=new CustomEvent（“selectedFilterChange”{
详情：{
filterType:this.props.filterSelector，
过滤器选择：item.id，
}
});
window.dispatchEvent（下拉更改）；
},
getInitialState:函数（）{
返回{
listVisible:错误，
显示：“
};
},
选择：功能（项目）{
this.props.selected=项目；
本.发送过滤器（项目）；
},
show:function（）{
this.setState（{listVisible:true}）；
document.addEventListener（“单击”，this.hide）；
},
隐藏：函数（）{
this.setState（{listVisible:false}）；
document.removeEventListener（“单击”，this.hide）；
},
render:function（）{
返回
{this.props.selected.name}
{this.renderListItems（）}
;
},
renderListItems:function（）{
var类别=[]；
for（var i=0；i过滤器：

);
}
});

有几点建议：

首先，

此.dispatchEvent

在React中不存在。“分派事件”的方式是将

函数作为道具传递，然后调用它。您的
下拉列表
组件应该有一个
onSelect
prop，它是一个函数。每当用户选择某个内容时，只需调用
this.props.onSelect
传递适当的参数即可

第二，决不能像在
select上那样设置
prop
  select: function(item) {
    this.setState({selected: item });
    if(this.onSelect) {
        this.onSelect(/* pass args here */);
    }
  }