[英]How to update components URL based on events from other components
I am working on a application where i have 3 components: Component1
, Component2
and Component3
. 我在一个我有3个组件的应用程序上工作:
Component1
, Component2
和Component3
。 All components retrieve data from a RESTful service with AJAX. 所有组件都使用AJAX从RESTful服务检索数据。
Component1
will retrieve a list of data when the application has been initialized. 初始化应用程序后,
Component1
将检索数据列表。 Each item in Componet1
, is a link which will retrieve data for Component2
based on its key/id when clicked. Componet1
每个项目都是一个链接,该链接将在单击时根据其键/ ID检索Component2
数据。 The same goes for Component2
, which will retrieve data for Component3
in the same fashion. Component2
,它将以相同的方式检索Component3
数据。
So if we imagine following main component: 因此,如果我们想象以下主要组成部分:
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>
);
}
});
As you can see in this example i have not implemented Component2
or Component 3
. 如您在本示例中看到的,我尚未实现
Component2
或Component 3
。 But when a ComponentItem
is clicked i want to call a AJAX URL in Component2
with its key, eg. 但是,当单击
ComponentItem
时,我想用其键在Component2
调用AJAX URL。 if the item has key 3: 如果项目具有键3:
<Component2 url="/api/dataSource2/3`>
I am not certain how i should be structuring the program and whether the click handling should be done within the MainComponent
or Component1
? 我不确定如何构造程序,以及是否应在
MainComponent
或Component1
内完成单击处理?
Another thing which may be a bit out of the scope of this example is multiple selection of Component 2
, which will pass an array of key/id. 可能超出本示例范围的另一件事是
Component 2
多重选择,它将选择一个键/ id数组。
In my opinion it is better to handle click in MainComponent as it has access to component2 directly. 我认为最好在MainComponent中处理单击,因为它可以直接访问component2。
In ComponentItem
在
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);
}
});
In Component1
render method can be like below in order to get the key of clicked item. 在
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>
);
},
In MainComponent
you can have a reference to Component2 and as soon as the event is captured you can do something like the below 在
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>
);
}
});
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.