React.Componentを使用して別のコンポーネントに関数の小道具を正しく渡すにはどうすればいいですか？

Question

私は自分自身をes6 +で紹介していますが、別のコンポーネントに関数の小道具を渡そうとするのは苦労します。

これは私のコードです：

class ProductList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.onVote = this.handleProductUpVote.bind(this); 
    } 
    handleProductUpVote(productId) { 
     console.log(productId +" was upvoted.") 
    } 
    render() { 
     const products = Data.map((product) => { 
      return (
       <Product 
        key={'product-'+product.id} 
        id={product.id} 
        title={product.title} 
        description={product.description} 
        url={product.url} 
        votes={product.votes} 
        submitter_avatar_url={product.submitter_avatar_url} 
        product_image_url={product.product_image_url} 
        onVote={this.handleProductUpVote} 
       /> 

      ); 
     }); 

     return (
      <div className="ui items"> 
       {products} 
      </div> 
     ); 
    } 
} 

私は（製品）このコンポーネントで機能onVoteを渡したい

class Product extends React.Component { 
    handleUpVote() { 
     this.props.onVote(this.props.id).bind(this) /* the error is here, I am trying 
to pass the id props, and invoke the onVote prop here */ 
    } 
    render() { 
     return (
      <div className="item"> 
       <div className="image"> 
        <img src={this.props.product_image_url} /> 
       </div> 
       <div className="middle aligned content"> 
        <div className="description"> 
         <a onClick={this.handleUpVote}> 
          <i className="large caret up icon"/> 
         </a> 
         {this.props.votes} 
        </div> 
        <div className="description"> 
         <a href={this.props.url}> 
         {this.props.title} 
         </a> 
        </div> 
        <div className="extra"> 
         <span> Submitted by: </span> 
         <img 
          className="ui avatar image" 
          src={this.props.submitter_avatar_url} 
         /> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

私はここで他の小道具と何の問題もありません。 handleUpVoteで関数を呼び出そうとしていますが、バインドを使用しましたが、動作させることはできません。助けて？

Answer 1

のようにそれを呼び出します。

コンストラクタでわかるように、すでにバインドされており、this.onVoteプロパティに割り当てられています。

2つの解決策があります。

1. あなたはrenderメソッドでonVote={this.onVote}を使用する必要があります。
2. コンストラクタ内のプロパティonVoteの名前をthis.handleProductUpVoteに変更します。そして、あなたはthis.handleProductUpVote = this.handleProductUpVote.bind(this)で終わるとhttp://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

   アップデートでメソッドをレンダリング（すなわちonVote={this.handleProductUpVote}）

詳細情報に割り当てを残す：私はまだ

class Product extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleUpVote = this.handleUpVote.bind(this); 
    } 
    handleUpVote() { 
     this.props.onVote(this.props.id) 
    } 
    // the render method 
} 

Answer 2

はあなたの製品コンポーネントに）（handleUpVoteでバインドを削除し、ちょうどあなたが製品のコンポーネントに渡す際に囲まれたhandleProductUpVoteメソッドを使用する必要がthis.props.onVote(this.props.id);