[英]How to update components URL based on events from other components
我在一個我有3個組件的應用程序上工作: Component1
, Component2
和Component3
。 所有組件都使用AJAX從RESTful服務檢索數據。 初始化應用程序后, Component1
將檢索數據列表。 Componet1
每個項目都是一個鏈接,該鏈接將在單擊時根據其鍵/ ID檢索Component2
數據。 Component2
,它將以相同的方式檢索Component3
數據。
因此,如果我們想象以下主要組成部分:
var ComponentItems = React.createClass({
render: function() {
return <li className="list-group-item" key={this.props.data.id}><a onClick={this.handleClick}>{this.props.data.name}</a></li>;
},
handleClick: function () {
this.props.onClick(this);
}
});
var Component1 = React.createClass({
getInitialState: function() {
return {componentsList: []};
},
componentWillMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState(data);
console.log(data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
var componentItems = this.state.componentsList.map(function (item) {
return <ComponentItem data={item} onClick={this.handleClick} />;
});
return (
<div className="col-lg-3">
<ul className="list-group">
{componentItems}
</ul>
</div>
);
},
handleClick: function (aComponent) {
alert("test");
}
});
var MainComponent = React.createClass({
render: function() {
return (
<div>
<Component1 url="/api/dataSource1/" />
<Component2 />
<Component3 />
</div>
);
}
});
如您在本示例中看到的,我尚未實現Component2
或Component 3
。 但是,當單擊ComponentItem
時,我想用其鍵在Component2
調用AJAX URL。 如果項目具有鍵3:
<Component2 url="/api/dataSource2/3`>
我不確定如何構造程序,以及是否應在MainComponent
或Component1
內完成單擊處理?
可能超出本示例范圍的另一件事是Component 2
多重選擇,它將選擇一個鍵/ id數組。
我認為最好在MainComponent中處理單擊,因為它可以直接訪問component2。
在ComponentItem
var ComponentItem = React.createClass({
render: function() {
return <li className="list-group-item" key={this.props.data.id}><a onClick={this.handleClick}>{this.props.data.name}</a></li>;
},
handleClick: function () {
this.props.onClick(this.props.data);
}
});
在Component1
render方法可以像下面這樣以獲取被單擊項的鍵。
handleClick: function (aComponent) {
this.props.onClick(aComponent);
}
render: function() {
var componentItems = this.state.componentsList.map(function (item) {
return <ComponentItem data={item} onClick={this.handleClick.bind(this)} />;
}, this);
return (
<div className="col-lg-3">
<ul className="list-group">
{componentItems}
</ul>
</div>
);
},
在MainComponent
您可以引用Component2,並且一旦捕獲到事件,就可以執行以下操作
var MainComponent = React.createClass({
handleClick: function(index){
this.refs.component2.setState({
url: '/api/dataSource2/' + index
});
},
render: function() {
return (
<div>
<Component1 url="/api/dataSource1/" onClick={this.handleClick}/>
<Component2 ref="component2" />
<Component3 />
</div>
);
}
});
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.