エラー通過機能onClick

Question

私は2つのファイルを持っています。リストComponentと単一項目コンポーネント。私のアプリでは、ユーザーは複数の項目を選択できます。それから私は "リスト" "アイテム"の状態要素を作成し、ユーザーがアイテムボタンをクリックすると、リスト要素はリストコンポーネントに通知し、アイテムを「リスト」からアイテム配列に保存します。

私は次のコード

List.jsxあります

registrarItems(data,item){ 
     console.log(data,"aqui 1 con",item); 
     let items = this.state.itemsAgregados.slice(); 
     if(!items.indexOf(data.id_producto)){ 
      console.log("no se encuentra"); 
      items.push(id); 
      this.setState({ 
       'itemsAgregados':items 
      }); 

     }else{ 
      console.log("ya existe"); 
      item.removerSeleccion(); 
     } 
     console.log("registrando items",id); 
    } 
render() { 
     return (
      <div className="content-app"> 
       <Navbar data={this.menu}/> 
       <div className="container lista-productos"> 
        { 
         this.state.productos.map((producto, index) => { 
          return (
           <Item data={producto} 
             registro = {this.registrarItems} 
             key={producto.id_producto}/> 
          ); 
         }) 
        } 
       </div> 
      </div> 
     ); 
    } 

そしてItem.jsx：

render() { 

     let props = this.props; 
     let img = JSON.parse(props.data.imagen); 
     let imgPath = Rutas.apiStatic + 'img/productos/' + props.data.id_producto + '/' + img.sm; 
     props.data.items = this; 

     return (
      <div className="row item-listado"> 
       <div className="col-xs-3"> 
        <img src={imgPath} className="img-circle img-item"/> 
       </div> 
       <div className="col-xs-7"> 
        <Link to={Rutas.producto + props.data.identificador}> 
         <h3 className="titulo">{props.data.titulo}</h3> 
         <span className="price">$ {props.data.precio}</span> 
        </Link> 
       </div> 
       <div className="col-xs-2 text-right"> 
        <ul className="list-unstyled list-acciones"> 
         <li> 
          <a href="#" onClick={()=>props.registro(props.data,this)} className={this.state.classAdd}> 
           <i className="fa fa-plus"></i> 
          </a> 
         </li> 

        </ul> 
       </div> 
      </div> 
     ) 
    } 

あなたが見ることができるように、私のように "registrarItems" メソッドを渡すをparam to Itemとそこには、itemのタグのonClickイベントとしてこれを追加します。しかし、私はonclick関数に "data"要素と "item"要素を渡す必要があります。最初は、Items配列でクリックされた要素を保存するか、またはボタンがトグル機能を持​​つ可能性があるため、要素配列を削除します（既に存在する場合は削除します）。しかし、私の "console.log" では、矢印関数を持つonClickメソッドで渡された両方のパラメータが "未定義"として表示されます。 いくつかの例を見ましたが、私は間違いをしません。誰でも助けてくれる？ありがとう。

Answer 1

この最終解決は簡単でした。私はフリーソウルと似たようなもので解決しました。

まず、Listコンポーネントをparamとしてitemに渡しました。リストのrenderメソッドでは私のコードの下には：

{ 
     this.state.productos.map((producto, index) => { 
      this.items[producto.id_producto] = producto; 
      return (
       <Item data={producto} 

         parent = {this} 
         key={producto.id_producto}/> 
      ); 
     }) 
    } 

は、その後、私は componentDidMount方法で親のparamを取得し、後で私はリスト方式から直接 validarItem関数を呼び出すと、私は私が必要なのparamsを渡します。 ここに私の商品コード：

onClickPlus(id,data) { 

     //{Rutas.listas + 'productos/' + props.data.id_producto //Url para pasar uno solo 
     this.setState({ 
      classAdd:'selected' 
     }) 
     if(!this.state.parent.validarItem(this.state.data)){ 
      this.removerSeleccion() 
     } 
     if(this.state.seleccionMultiple){ 

     } 
    } 
    removerSeleccion(){ 

     this.setState({classAdd:'normal'}) 
    } 
    componentDidMount(){ 
     this.setState({ 
      parent: this.props.parent, 
      data : this.props.data 
     }) 
    } 

    render() { 

     return (
      // more code 
       <a href="#" onClick={() => this.onClickPlus(parent)} className={this.state.classAdd}> 
        <i className="fa fa-plus"></i> 
       </a> 
      //more render code... 
     ) 
    } 

これが最善の方法ですが、私のために動作するかどうか、私は知りません。