on单击不使用映射的组件

Question

我有一个播放器组件，它将几个歌曲名称+图像映射到几个歌曲组件
我的播放器组件代码如下：

return (
<div className="App">
<div className="main-wrapper">
{props.foundASong && 
<div className="song_container">{props.songs.map((object, i) => <Song object={object} key={i} />)}</div>
}
<div className="background" style={backgroundStyles} />{" "}
</div>
</div>
);

我的Song代码是这样的：

import React, { Component } from "react";
import "./Player.css";
import "./Song.css";
class Song extends Component {
constructor(props) {
super(props);
this.state = {
clicked: false
};
this.changeBackground = this.changeBackground.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
clicked: !prevState.clicked
}));
console.log("clicked");
}

render(props){
return (
<div>
<button onClick={this.handleClick}>Click me!</button>
<div className="song_box"> 
<img src={this.props.object.album.images[0].url} />
<div>{this.props.object.name}</div> 
</div>
</div>
);
}
}
export default Song;

但由于某种原因，当我点击任何按钮时都不会发生任何事情。有什么想法吗？

Answer 1

需要调用handleClick函数：

<button onClick={() => this.handleClick()}>Click me!</button>