Javascript 显示React中已单击元素的详细信息

我正在构建一个联系人应用程序，我希望能够在单击某个特定元素时显示该元素的详细信息页面。我试图将单击元素的详细信息传递给更改页面显示的回调函数，但似乎无法获取我所指的内容。我不确定我错过了什么

以下是包含我希望能够单击的元素的组件：

import React, { Component } from "react";

export default class ContactItem extends Component {
  constructor() {
    super();
  }

  render() {
    // console.log(this.props);
    return (
      <div
        className="item-div"
        onClick={() => this.props.changeDisplay(this.props.contact)}
      >
        <img
          className="item-image"
          src={this.props.contact.smallImageURL}
        ></img>
        <div className="text-div">
          <h4 className="item-header">
            {this.props.contact.isFavorite === true ? (
              <span className="emoji-span">&#11088;</span>
            ) : (
              <span className="other-span"></span>
            )}
            {this.props.contact.name}
          </h4>
          <p className="item-text">{this.props.contact.companyName}</p>
        </div>
        <hr></hr>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类ContactItem扩展组件{
构造函数（）{
超级（）；
}
render（）{
//console.log（this.props）；
返回(
this.props.changeDisplay（this.props.contact）}
>
{this.props.contact.isFavorite==真(
⭐
) : (
)}
{this.props.contact.name}
{this.props.contact.companyName}

);
}
}

我想单击此div，然后显示所选项目的详细信息。 下面是我从子元素调用回调函数的组件：

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  withRouter
} from "react-router-dom";
import ContactList from "./components/ContactList";
import ContactDetails from "./components/ContactDetails";

class App extends Component {
  constructor() {
    super();

    this.state = {
      contacts: [],
      displayContact: false,
      activeContact: []
    };
  }

  componentDidMount() {
    this.fetchContacts();
  }

  fetchContacts = () => {
    fetch("https://api.myjson.com/bins/e32o6")
      .then(resp => resp.json())
      .then(contacts => {
        this.setState({
          contacts
        });
      })
      .catch(alert);
  };

  changeDisplay = contact => {
    console.log("got here");
    this.setState(prevState => ({
      displayContact: !prevState.displayContact,
      activeContact: contact
    }));
  };

  render() {
    return (
      <div>
        {this.state.displayContact ? (
          <ContactDetails
            contacts={this.state.contacts}
            activeContact={this.state.activeContact}
          />
        ) : (
          <ContactList
            contacts={this.state.contacts}
            displayContact={this.state.displayContact}
            changeDisplay={() => this.changeDisplay()}
            activeContact={this.state.activeContact}
          />
        )}
      </div>
    );
  }
}

import React，{Component}来自“React”；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
带路由器
}从“反应路由器dom”；
从“/components/ContactList”导入联系人列表；
从“/components/ContactDetails”导入ContactDetails；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
联系人：[]，
显示联系人：false，
活动联系人：[]
};
}
componentDidMount（）{
this.fetchContacts（）；
}
fetchContacts=（）=>{
取回（“https://api.myjson.com/bins/e32o6")
.then（resp=>resp.json（））
。然后（联系人=>{
这是我的国家({
联络
});
})
.捕获（警报）；
};
changeDisplay=联系人=>{
console.log（“到达这里”）；
this.setState（prevState=>({
displayContact:！prevState.displayContact，
活动联系人：联系人
}));
};
render（）{
返回(
{this.state.displayContact(
) : (
this.changeDisplay（）}
activeContact={this.state.activeContact}
/>
)}
);
}
}

changeDisplay函数应该将处于状态的activeContact设置为单击的联系人，但是当我尝试从子组件传递该信息时，它将不起作用。我想我需要将contact.id传递回回调函数，但我肯定做错了。

如果您的console.log（this.props）==未定义，请尝试以下操作：

 constructor(props) {
    super(props);
  }

当我在子组件中输入console.log（this.props）时，它返回每个单独的元素（contact）。如果在回调函数中输入console.log（contact），它将返回所有项目，而不仅仅是我单击的项目。