一、父组件Father.js
import React,{Component} from 'react'
class Father extends Component{
constructor(props){
super(props) //调用父类
this.state = {
list:['测试一','测试二']
}
}
render(){
return(
<div>
<ul>
{
this.state.list.map((item,index)=>{
return(
<ChildItem
key={index+item}
content={item} //传递给子组件
index={index}
deleteItem = {this.deleteItem.bind(this)}
/>
)
})
}
</ul>
</div>
)
}
//删除
deleteItem(index){
console.log(index)
let list = this.state.list;
list.splice(index,1);//从索引开始删除一项,react不能直接操作this.state里的数据
this.setState({
list:list
})
}
}
export default Father
二、子组件ChildItem .js
import React, { Component } from 'react';
class ChildItem extends Component {
// this.props 接收父组件传 的值,子组件不允许直接干预父组件的内容
state = { }
constructor(props){
super(props)
this.handleClick = this.handleClick.bind(this);//删除按钮的this指向
}
render() {
return (
<li>
{this.props.content}
<button onClick={this.handleClick}>删除</button>
</li>
);
}
handleClick(){
console.log(this.props.index)
this.props.deleteItem(this.props.index);//调用父组件删除方法
}
}
export default ChildItem;