Reactの子コンポーネントからオブジェクトをクリックして取得

Question

クリックして関数handleDisplayProductをトリガーしてクリックしたオブジェクトに渡したいと思います。これまでは、すべてのオブジェクトに対してリストが生成されたにもかかわらず、関数がhandleイベントを呼び出すと、関数handleDisplayProductが呼び出されました。 それでは、コンテナでイベントonclickをバインドして、それをクリックした要素に渡しますか？

コンテナ

// Method to retrieve state from Stores 
function getAllProductState(){ 
return { 
    products: ProductStore.getProducts(), 
}; 
} 

export default class ProductAllContainer extends Component { 
constructor(props){ 
    super(props); 
this.state = getAllProductState(); 
} 

handleDisplayProduct(data){ 
console.log(data); 
// ProductActions.selectProduct(data) 
} 

render(){ 
const products = this.state.products; 
return(
    <div> 
    { products.map(function(product,i){ 
     return (
     <ProductThumbnail 
      product = { product } 
      key = { i } 
      **onDisplayProduct = { this.handleDisplayProduct(product) }** 
     /> 
    ) 
    },this)} 
    </div> 
) 
} 
} 

あなたが反応するクラスにイベントリスナーをバインドする必要があるビュー

const ProductThumbnail = (props)=>{ 

return(
    <div> 
    <LinksTo to="/" **onClick={props.onDisplayProduct}**> 
    <h1>{props.product.headline}</h1> 
    <img src={props.product.images[0].imagesUrls.entry[1].url} alt="Thumbnail small pic"/> 
    </LinksTo> 
    </div> 
) 
} 

Answer 1

。あなたはこのようにすることができます。

constructor(props){ 
    super(props); 
    this.state = getAllProductState(); 
    this.handleDisplayProduct = this.handleDisplayProduct.bind(this); 
} 

または代わりに矢印機能を使用することもできます。

handleDisplayProduct = (data) => { 
console.log(data); 
// ProductActions.selectProduct(data) 
} 

注：クラスプロパティは、現在のJavaScript標準の一部ではありません。したがって、2番目の例は、babel-plugin-transform-class-propertiesバベルプラグインを追加しない限りうまくいきません。

編集：@ryanjduffyもあなたのコードで重大な間違いを指摘しました。彼のコメントを参照してください。