javascript 如何从 ReactJS 中的 onClick 函数调用另一个组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29919328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call another component from onClick function in ReactJS
提问by Hetal Khunti
I am learning Reactjs. I have implemented one sample react app with rails. I have search a lots to find the solution but I didn't find any. I wanted to call another component from onClickfunction. But nothing happen. Is that possible what I try to achieve? If yes, then please point me where I do mistake and If not, then which way I can implement. Here is my code:
我正在学习 Reactjs。我已经用 Rails 实现了一个示例反应应用程序。我已经搜索了很多来找到解决方案，但我没有找到任何解决方案。我想从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>
)
}
});
}
});
Update:If I try below trick then it call the component but reload the page and again disappear called component :(
更新：如果我尝试以下技巧，那么它会调用组件但重新加载页面并再次消失被调用的组件:(
handleEdit: function() {
React.render(<UpdateComments comments={ this.props} /> , document.getElementById('comment_'+ this.props.id));
}
any other detail if you required then feel free to ask. Thanks in advance. :)
如果您需要任何其他详细信息，请随时询问。提前致谢。:)
回答by dobleUber
Maybe this fiddlecould point you in right way
也许这个小提琴可以为你指明正确的方向
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}
<First1/>
<First2/>
</div>;
}
});
var First1 = React.createClass({
myClick: function(){
alert('Show 1');
changeFirst();
},
render: function() {
return <a onClick={this.myClick}> Saludo</a>;
}
});
var First2 = React.createClass({
getInitialState: function(){
return {myState: ''};
},
componentDidMount: function() {
var me = this;
window.changeFirst = function() {
me.setState({'myState': 'Hey!!!'})
}
},
componentWillUnmount: function() {
window.changeFirst = null;
},
render: function() {
return <span> Saludo {this.state.myState}</span>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>Basically I use those links:
基本上我使用这些链接：
communicate between components
It hopes this helps.
它希望这会有所帮助。
Also, you could use the container component and use it like a bridge between both components.
此外，您可以使用容器组件并将其用作两个组件之间的桥梁。
