오류 전달 기능 onClick

Question

두 개의 파일이 있습니다. 목록 구성 요소 및 단일 항목 구성 요소. 내 응용 프로그램에서 사용자는 여러 항목을 선택할 수 있습니다. 그런 다음 "목록" "항목"에서 상태 요소를 만들고 사용자가 항목 단추를 클릭하면 목록 요소가 목록 구성 요소에 통지하고 항목을 "목록"에서 항목 배열에 저장합니다.

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"방법을 전달합니다

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 :

나는 다음 코드를

List.jsx이 param to Item 그리고 거기에 item의 태그에 onClick 이벤트를 추가합니다. 하지만 나는 onclick 함수에 "data"와 "item"요소를 전달해야합니다. 첫 번째는 Items 배열에서 클릭 한 요소를 저장하거나 단추가 토글 기능을 가질 수 있으므로 요소 배열 (이미있는 경우)을 제거하는 것입니다. 그러나 내 "console.log"에서 화살표 함수가 인 onClick 메서드에서 전달 된 두 매개 변수는 모두 "정의되지 않음"으로 표시됩니다. 몇 가지 예를보고 실수를하지 않습니다. 아무도 도와 줄 수 있니? 감사.

Answer 1

마지막 해결 방법은 간단합니다. 나는 그의 의견에 대해 자유 - 영혼과 비슷한 것으로 해결했다.

먼저 List 구성 요소를 매개 변수로 항목에 전달했습니다. 목록의 렌더링 방법에 내 코드 아래 :

{ 
     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... 
     ) 
    } 

이 가장 좋은 방법이지만, 나를 위해 작동하는지 모르겠어요.