Comment appeler un autre composant à partir d'une fonction onClick dans ReactJS

Je suis en train d'apprendre Reactjs. J'ai implémenté un échantillon de réagir app avec des rails. J'ai recherche un lots de trouver la solution mais je n'ai pas trouvé. Je voulais appeler un autre composant de onClick fonction. Mais rien ne se passe. Est-ce possible que je cherche à atteindre? Si oui, alors s'il vous plaît m'indiquer où je fais erreur et Si non, alors de quelle manière je peux le mettre en œuvre. Voici mon code:

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

Mise à jour:
Si j'essaie en dessous de truc alors il appeler le composant mais de recharger la page et encore disparaître appelé composante 🙁 

 handleEdit: function() {

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

tout autre détail, si vous nécessaire, alors n'hésitez pas à demander. Merci à l'avance. 🙂

  • Travaillez-vous avec le flux ou le reflux? Actuellement je travaille avec le reflux, et j'utilise le magasin pour y parvenir.
  • Non, je ne suis pas à l'aide de flux. simple reactjs
  • êtes-vous essayé facebook.github.io/réagir/conseils/...??
  • J'ai dû vérifier cela, mais je ne pouvais pas comprendre comment le faire avec mon exigence
InformationsquelleAutor Hetal Khunti | 2015-04-28
  1. 4

    Peut-être que ce violon pourrait vous diriger dans le droit chemin

    JS:

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

    HTML:

    <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>

    Fondamentalement, je suis d'utilisation de ces liens:

    la communication entre les composants

    dom écouteurs d'événement

    Il espère que cette aide.

    Aussi, vous pouvez utiliser le composant conteneur et de l'utiliser comme un pont entre les deux composants.

    InformationsquelleAutor dobleUber