Come chiamare un altro componente dalla funzione onClick in ReactJS

Question

Sto imparando Reactjs. Ho implementato un campione per reagire app con rail. Ho cercato un sacco per trovare la soluzione, ma non ho trovato nessuno. Volevo chiamare un altro componente dalla funzione onClick. Ma non succede niente. È possibile ciò che cerco di ottenere? Se sì, per favore indicami dove sbaglio e se no, allora in quale modo posso attuare. Qui è il mio codice:

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

Aggiornamento: Se provo qui di seguito trucco allora chiama il componente, ma ricaricare la pagina e di nuovo sparire chiamato componente :(

handleEdit: function() { 

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

ogni altro dettaglio, se si richiesto quindi non esitate a chiedere. Grazie in anticipo. :)

Answer 1

Forse questo fiddle potrebbe puntare nella giusta

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>

Fondamentalmente io uso questi link:

communicate between components

dom event listeners

Si spera che questo aiuta.

Inoltre, è possibile utilizzare il componente contenitore e utilizzarlo come un ponte tra entrambi i componenti.