我有一个功能,您可以单击一个图像并查看可单击的名称列表......当您单击一个名称时,该人的图像应该取代原始图像。我正在使用艺术家 api,而不是在控制台中收到错误,图像更改为名称为“未定义”的艺术家的 img...奇怪。可能不是一个巨大的修复,但我已经被这个问题折磨了一段时间了。
searchForArtist(query) {
request.get(`https://api.spotify.com/v1/search?q=${query}&type=artist`)
.then((response) => {
const artist = response.body.artists.items[0];
const name = artist.name;
const id = artist.id;
const img_url = artist.images[0].url;
this.setState({
selectedArtist: {
name,
id,
img_url,
},
});
})
.then(() => {
this.getArtistAlbums();
})
.catch((err) => {
console.error(err);
});
}
getSubsequentCollabs(artist) {
this.setState({
selectedArtist: {},
selectedAlbums: {},
artistCounts: {},
});
console.log(artist);
this.searchForArtist(artist);
}
artistOnClick(e) {
console.log(e);
let artist = e.target.value;
this.getSubsequentCollabs(artist);
}
我有另一个组件执行此操作:
const Artist = ({name, artistOnClick}) => {
return (
<div name={name} onClick={artistOnClick}>
{name}
</div>
)
}
export default Artist;
event.target
会给你目标HTML
元素。 Javascript会将Node的所有属性作为属性event.target
.
例如:
<div id="hello">Hello</div>
e.target.id //returns 'hello'
有一些特殊情况,例如inputs
财产在哪里value
隐含中。但是,对于其他 HTML 元素,您需要显式指定属性。
所以,你的 HTML 应该是这样的
const Artist = ({name, artistOnClick}) => {
return (
<div value={name} onClick={artistOnClick}>
{name}
</div>
)
}
e.target.value //return the name
OR
const Artist = ({name, artistOnClick}) => {
return (
<div onClick={() => artistOnClick(name)}>
{name}
</div>
)
}
e.target.name //returns the name
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)