gpt4 book ai didi

javascript - 如何根据其他组件的事件更新组件 URL

转载 作者:行者123 更新时间:2023-12-03 10:43:55 25 4
gpt4 key购买 nike

我正在开发一个应用程序,其中有 3 个组件:Component1Component2Component3。所有组件都使用 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>
);
}
});

正如您在本示例中看到的,我尚未实现 Component2Component 3。但是,当单击 ComponentItem 时,我想使用其键调用 Component2 中的 AJAX URL,例如。如果该项目有键 3:

<Component2 url="/api/dataSource2/3`>

我不确定应该如何构建程序以及点击处理是否应该在 MainComponentComponent1 内完成?

另一件可能有点超出本示例范围的事情是对组件 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 渲染方法中可以像下面这样来获取单击项目的键。

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>
);
}
});

希望这有帮助。

关于javascript - 如何根据其他组件的事件更新组件 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28643983/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com