
//src/components/Item.js
import React from 'react';
import '../Item.css'
class Item extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div onClick={this.handleClick.bind(this,this.props.data.id)} className="item">
<img className="cover" src={this.props.data.coverImgUrl} />
<p className="name">{this.props.data.name}</p>
</div>
)
}
handleClick=(id)=>{
/* 在子组件调用方法,向组件传参 */
this.props.deleteItem(id)
console.log(id)
}
}
export default Item;
//src/App.js
import React from 'react';
import Item from './components/Item'
import axios from 'axios'
import './App.css'
class App extends React.Component{
constructor(props){
super(props);
this.state = {
playlists:[]
}
}
render(){
return (
<div className="container">
{/* 子组件的属性接收父组件传递过来的方法 */}
{this.state.playlists.map(item=>{
return (
<div key={item.id}>
<Item data={item} deleteItem = {this.handleDelete.bind(this)}></Item>
</div>
)
})}
</div>
)
}
handleDelete(id){
console.log(id)
var playlists = this.state.playlists.filter(item=>item.id !== id)
this.setState({
playlists
})
}
componentDidMount(){
var url = "https://music.aityp.com/top/playlist";
axios.get(url).then(res=>{
// console.log(res.data.playlists)
this.setState({
playlists:res.data.playlists
})
})
}
}
export default App;