Как вызвать другой компонент из функции onClick в ReactJS

Question

Я изучаю 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> 
     ) 
     } 
    }); 
    } 
}); 

Update: Если я пытаюсь ниже трюк, то это называют компонент, но перезагрузите страницу и снова исчезают под названием компонента :(

handleEdit: function() { 

    React.render(<UpdateComments comments={ this.props} /> , document.getElementById('comment_'+ this.props.id)); 
} 

любая другая деталь, если вам требуемый, затем не стесняйтесь спрашивать. Спасибо заранее. :)

Answer 1

Возможно, это fiddle может указывать вас на правильный путь

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>

В основном я использую эти ссылки:

communicate between components

dom event listeners

Он надеется, что это помогает.

Кроме того, вы можете использовать компонент контейнера и использовать его как мост между обоими компонентами.