6

Reactjsを学んでいます。Rails で 1 つのサンプル 反応アプリを実装しました。解決策を見つけるためにたくさん検索しましたが、何も見つかりませんでした。関数から別のコンポーネントを呼び出したかったの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));
 }

その他の詳細が必要な場合は、お気軽にお問い合わせください。前もって感謝します。:)

4

1 に答える 1

5

たぶん、このフィドルはあなたを正しい方向に向けるかもしれません

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>

基本的に私はこれらのリンクを使用します：

コンポーネント間の通信

dom イベントリスナー

これが役立つことを願っています。

また、コンテナ コンポーネントを使用して、両方のコンポーネント間のブリッジのように使用することもできます。

于 2015-04-28T13:56:00.237 に答える