子要素がバインドされていない

Question

次の問題があります。私はModalと呼ばれる子コンポーネントを持っていて、それはブートストラップボタンとポップアップで構成されています。 Modalは、renderPostsというレンダリングコンポーネント内に表示されます。

Component.js

deleteThis(id){ 
    console.log("THE ID IS", id); 
    } 

    renderPosts(post) { 
    return (
     <tr key={post.id}> 

      <td className="col-md-3"> {post.id}</td> 
      <td onClick = {this.deleteThis.bind(this, post.id)}>CLICK HERE</td> 
      <td> 
      <Modal 
       modalId="deletepost" 
       className="btn btn-danger" 
       onClick={this.deleteThis.bind(this,post.id)} /> 
      </td> 

     </tr> 
    ); 
    } 

    render() { 
    return (
     <div> 
     <div className="row"> 
      <div className="col-lg-12"> 
      <div> 
       <table className='table table-striped header-fixed'> 
       <thead> 
        <tr> 
        <th>Name</th> 
        <th> Test </th> 
        <th> Delete </th> 
        </tr> 
       </thead> 
       <tbody> 
        {this.props.post.map(this.renderPosts.bind(this))} 
       </tbody> 
       </table> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { post:state.post.all}; 
} 

私のモーダルは、それが正常に動作し、以下のようなものであるとき。私はこだわっていますのはここ

import React from 'react'; 

const Modal = ({onClick, modalId, className}) => { 
    return (
     <div> 
     <button 
      type="button" 
      data-dismiss="modal" 
      className="btn btn-danger pull-xs-right" 
      onClick={onClick}> 
     DELETE 
     </button> 
     </div> 

    ); 
} 

export default Modal; 

は次のとおりです。私は小道具に添付のonClickメソッドを経由して、それぞれ異なるIDがdeleteThisという出力することができますよ。ブートストラップでポップアップモーダル機能を使用したいと思います。以下のコードは私がポップアップ機能を得ることを可能にします。しかし、私の問題は、ボタンをクリックすると、onClickメソッドのIDが常に1であることです。

Modal.js（モーダルとブートストラップボタン）

import React from 'react'; 

const Modal = ({onClick, modalId, classNameNameName}) => { 
    return (
     <div> 

     <button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

     <div id="myModal" className="modal fade" role="dialog"> 
      <div className="modal-dialog"> 
      <div className="modal-content"> 
       <div className="modal-footer"> 
       <button type="button" className="btn btn-default" data-dismiss="modal" onClick={onClick.bind(this)}>Show Id</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

    ); 
} 

export default Modal; 

私はのonClickメソッドを持つボタンのみポップアップするモーダルの内側にあるので、IDは常に上記のコードのための1理由があると思います他のボタンをクリックした場合。

上記のコードでidをonClickハンドラにバインドする方法はありますか？

私は私のような何かをする必要があります考えている：this変数は常に現在を指します

onClick={this.deleteThis.bind((this,feed.id).bind(this))} /> 

をしかし、私は働いてコードにそれを変換する方法

Answer 1

あなたがここに見ることができるように、Modalが機能ステートレスなコンポーネント

const Modal = ({onClick, modalId, classNameNameName}) => { 
    // ... 

として定義される機能性成分は、キーワードthisを持っていません。

しかし、それは問題ではなかった、本当の問題は、すべてのモーダル要素がHTMLで同じid myModalを持つし、あなたが同じイベントを取得しているし、あなたが他の要素をクリックしたときにトリガ。

ここで私はを動的に生成したIdsをモーダルに割り当てた作業フィドルです。

https://jsfiddle.net/free_soul/2ub6rmkc/

Answer 2

を知りませんコンポーネントのインスタンスしかし、純粋な（つまり機能的な）コンポーネントにバインドすることはできません。あなたもそうではありません。最初のModalの場合と同様にonClick={onClick}を使用してください。

実際の問題は、ReactのjQueryベースのフレームワークであるBootstrapを使用しようとしていることです。代わりにReact Bootstrapを試してください。