6
我正在学习Reactjs。我已经使用rails实现了一个示例反应应用程序。我有很多搜索找到解决方案,但我没有找到任何。我想从onClick
函数中调用另一个组件。但没有发生。这可能是我尝试实现的目标吗?如果是,那么请指出我在哪里犯错,如果不是,那么我可以采用哪种方式实施。这里是我的代码:如何从ReactJS中的onClick函数调用另一个组件
var Comment = React.createClass({
render: function() {
return (
<div id={"comment_"+ this.props.id }>
<h4>{ this.props.author } said:</h4>
<p>{ this.props.desc }</p>
<a href='' onClick={this.handleDelete}>Delete</a> | #this is for delete which works great
<a href='' onClick={this.handleEdit}>Edit</a>
# If I put here then it works fine <UpdateComments comments={ this.props} /> but I don't want it here
</div>
)
},
handleDelete: function(event) {
$.ajax({
url: '/comments/'+ this.props.id,
type: "DELETE",
dataType: "json",
success: function (data) {
this.setState({ comments: data });
}.bind(this)
});
},
handleEdit: function(event) {
var Temp = React.createClass({
render: function(event){
return(<div>
<UpdateComments comments={ this.props} /> #here I want to call UpdateComments component
</div>
)
}
});
}
});
更新: 如果我尝试下面的技巧后,它调用组件,但重新加载页面,并再次消失调用的组件:(
handleEdit: function() {
React.render(<UpdateComments comments={ this.props} /> , document.getElementById('comment_'+ this.props.id));
}
任何其他细节,如果你需要的话可以随意问。提前致谢:)
您是否在使用助焊剂或回流?目前,我正在与回流,我用商店来实现这一目标。 – dobleUber
@melaspelas:不,我不使用助焊剂。简单reactjs –
你试过https://facebook.github.io/react/tips/communicate-between-components.html ?? – dobleUber