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

时间:2020-01-11 18:54:49

标签: javascript reactjs react-props

我正在构建联系人应用程序,我希望能够在单击特定元素时显示其详细信息页面。我正在尝试将clicked元素的详细信息传递给更改页面显示的回调函数,但似乎无法抓住我所指的那个。我不确定我缺少什么。

这里是包含我想要单击的元素的组件:

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

我要单击此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>
    );
  }
}

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

1 个答案:

答案 0 :(得分:0)

如果您的console.log(this.props)===未定义,请尝试以下操作:

 constructor(props) {
    super(props);
  }