请原谅我的天真，但我对React很新，而且我遇到了一些障碍。我有两个相关的组件，我需要在它们之间进行通信。我有一个＆＃39; Dropdown＆＃39;表示选项元素（实际上是div）的组件，我需要它的值来导致另一个组件的状态更改。下拉列表应该基本上将类别设置为第二个组件的状态，该组件将根据类别显示不同的内容。我已经尝试了几种方法来处理这个问题但收效甚微。目前我正在尝试使用EventListeners来处理这个问题，但这似乎并没有起作用。
下面是我当前的代码，以及现在设置的方式我得到一个错误说＆＃39; this.dispatchEvent不是函数＆＃39;。如果有人可以帮助我解决这个问题并向前推进，那将非常感激。或者，如果这是处理这种情况的一种不好的方式，我对建议非常开放。
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>
);
}
});
答案 0 :(得分：0)
一些建议：
首先，React中不存在this.dispatchEvent。 “发送事件”的方式是将function作为道具传递然后再调用它。您的dropdown组件应具有onSelect道具，这是一个功能。每当用户选择某些内容时，只需调用this.props.onSelect传递适当的参数。
其次，您不应该像在prop方法上那样设置select。如果要在组件中存储所选项的值，则应使用state。
您的select方法的重构版本将是这样的：
select: function(item) {
this.setState({selected: item });
if(this.onSelect) {
this.onSelect(/* pass args here */);
}
}
由于上述更改，您的其余代码可能应该重构，这只是为了清晰起见。
额外提示：请注意controlled与uncontrolled组件的概念。
受控组件：几乎不存储状态的组件。它们只是在某些内容发生变化时触发事件，并且父组件负责通过相应的props重新呈现它。在您的情况下，如果您的组件充当controlled，它将不会保持所选项的状态，它只会触发onSelect事件，而父级会重新呈现它，将新选择的项目作为道具。
不受控制的组件：无需附加处理程序即可自行运行的组件。在您的情况下，如果您的组件充当uncontrolled，即使 可能有onSelect事件，它也会保持所选项目的状态，使得没有附加任何事件处理程序它将工作。当某些事情发生变化时，它会重新振作起来。
通常，组件设计为controlled或uncontrolled，但可以将它们混合使用。