Reactjs 在react中单击随机div时向父组件发送数据

我正在使用名为“allContacts”的对象数组和映射函数创建N个

div

s。单击其中一个

div

s时，我想将相应的div id发送到父组件。我该怎么做？每个div都有不同的id，这里id指的是

eachContact.id

我无法使用道具发送数据，因为它显示“未定义”。我可以在react路由器中使用

链接

发送数据吗（我正在使用react路由器）

displayEachContact（）{
addressBookUIFunctionality.prototype.hideAddPopup（）；
返回(
this.props.AllContacts.map（函数（每个联系人）{
返回(
{/*onClick={（）=>AllContacts.prototype.displayContact（eachContact）}*/}
{eachContact.Name}
{eachContact.Email}
{eachContact.Mobile}
);
})
)
}
render（）{
返回(
{this.displayEachContact（）}
);
}

显示每个联系人（）{
addressBookUIFunctionality.prototype.hideAddPopup（）；
返回(
this.props.AllContacts.map（函数（每个联系人）{
返回(
{onClick={（）=>this.props.displayContact（eachContact.ID）}
{eachContact.Name}
{eachContact.Email}
{eachContact.Mobile}
);
})
)
}
render（）{
返回(
{this.displayEachContact（）}
);

---

单击div调用一个函数，如

this.props.displayContact（eachContact.ID）

来自父组件并传递ID或任何您想要作为参数的内容。

您可以在父组件中定义一个函数，并将其作为道具传递给子组件。请参阅，假设我有一个来自父组件的名为getContactId的函数，该函数已发送到此chid组件。请告诉我，当我单击特定的di时，如何将数据发送回父组件v、 你好，prakash！我尝试过这个方法，但是遇到了这个关键字的问题。它说这个隐式地有类型any，因为它没有类型annotation@xandercage请你添加完整的类组件代码，这样我就可以告诉你出了什么问题。

displayEachContact() {
        addressBookUIFunctionality.prototype.hideAddPopup();
        return (
            this.props.AllContacts.map(function (eachContact) {
                return (
                    <Link to={'/'+eachContact.ID} style={{textDecoration:         'none'}} >
                    {/* onClick={() =>     AllContacts.prototype.displayContact(eachContact)} */}
                    <div id={eachContact.ID} className="each_contact inactive_contact">
                        <span className="contact_summary contact_summary_first_field">{eachContact.Name}</span>
                        <span className="contact_summary">{eachContact.Email}</span>
                        <span className="contact_summary">{eachContact.Mobile}</span>
                    </div>
                    </Link>
                );

            })
            )
    }
    render() {
        return (
            <Route exact path='/allContacts'>
                <div className="contacts">
                    {this.displayEachContact()}
                </div>
            </Route>
        );
    }

displayEachContact() {
    addressBookUIFunctionality.prototype.hideAddPopup();
    return (
        this.props.AllContacts.map(function (eachContact) {
            return (
                <Link to={'/'+eachContact.ID} style={{textDecoration:'none'}} >
                { onClick={() =>  this.props.displayContact(eachContact.ID)}}
                <div id={eachContact.ID} className="each_contact inactive_contact">
                    <span className="contact_summary contact_summary_first_field"> 
                      {eachContact.Name}</span>
                    <span className="contact_summary">{eachContact.Email}</span>
                    <span className="contact_summary">{eachContact.Mobile}</span>
                </div>
                </Link>
            );

        })
        )
    }
    render() {
        return (
            <Route exact path='/allContacts'>
                <div className="contacts">
                    {this.displayEachContact()}
                </div>
            </Route>
        );