Javascript 传递函数onClick-in-react时出错

我有两个文件。列表组件和单个项目组件。在我的应用程序中，用户可以选择多个项目。然后，我在“list”“items”中创建一个state元素，我的想法是当用户单击item按钮时，list元素通知list组件并将该项保存在“list”的items数组中

我有下一个密码

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>
        );
    }

registrarItems（数据，项目）{
控制台日志（数据，“aqui 1 con”，项目）；
让items=this.state.itemsAgregados.slice（）；
如果（！items.indexOf（data.id\u producto））{
控制台日志（“无se Encuntera”）；
项目。推送（id）；
这是我的国家({
“itemsAgregados”：项目
});
}否则{
控制台日志（“存在”）；
item.RemoveSelecion（）；
}
控制台日志（“注册项目”，id）；
}
render（）{
返回(
{
this.state.productos.map（（producto，index）=>{
返回(
);
})
}
);
}

和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>
        )
    }

render（）{
让props=this.props；
让img=JSON.parse（props.data.imagen）；
设imgPath=Rutas.apistic+'img/productos/'+props.data.id_producto+'/'+img.sm；
props.data.items=这个；
返回(
{props.data.titulo}
${props.data.precio}




)
}

如您所见，我将“registeritems”方法作为参数传递给Item，并在那里将其作为onClick事件添加到标记from Item中。但是我需要将“data”和自己的“item”元素传递给onclick函数。第一个是保存在Items数组中单击的元素，或者删除它（如果它已经存在），因为按钮可能有一个切换功能。但是在我的“console.log”中，用箭头函数传递给onClick方法的两个参数都显示为“未定义”。

---

我看到一些例子，我不明白我的错误。有人能帮我吗？谢谢。

这个问题的最终解决办法很简单。我用类似于《自由灵魂》（Free soul）的话解决了这个问题

首先，我将List组件作为参数传递给item。下面是列表的渲染方法中的“我的代码”：

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

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

{
this.state.productos.map（（producto，index）=>{
this.items[producto.id\u producto]=producto；
返回(
);
})
}

然后在componentDidMount方法中获取父参数，然后直接从List方法调用validarItem函数，并传递所需的参数。 这里是我的商品代码：

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

onClickPlus（id、数据）{
//{Rutas.listas+'productos/'+props.data.id_producto//Url para pasar uno solo
这是我的国家({
classAdd:“已选定”
})
如果（！this.state.parent.validarItem（this.state.data））{
这个
}
if（this.state.seleccionMultiple）{
}
}
删除选择（）{
this.setState（{classAdd:'normal'}）
}
componentDidMount（）{
这是我的国家({
家长：this.props.parent，
数据：this.props.data
})
}
render（）{
返回(
//更多代码
//更多渲染代码。。。
)
}

---

我不知道这是否是最佳实践，但对我来说很有效。

尝试将

registeritems

绑定到类

列表
内部
构造函数
或将
registarItems
定义为类属性（前提是您已预设）使用arrow函数。问题是，如果我将该方法作为属性，我将失去对父类的访问权。我尝试了它，并将其创建为回调方法。