我正在构建联系人应用程序,我希望能够在单击特定元素时显示其详细信息页面。我正在尝试将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">⭐</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传递回回调函数,但是我肯定做错了。
答案 0 :(得分:0)
如果您的console.log(this.props)===未定义,请尝试以下操作:
constructor(props) {
super(props);
}