【发布时间】：2015-11-05 18:46:03
【问题描述】：
请原谅我的幼稚，但我对 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>
);
}
});
【问题讨论】：
标签： javascript javascript-events reactjs