本小节,我们来实现列表的删除按钮的功能,点击删除按钮,弹出一个弹出是否删除的弹窗,点击确定删除,点击取消就不删除。
因为我们之前已经写过祖孙组件的通信了我们直接写代码:
- 1、在App组件里面定义一个删除数据的函数
export default class App extends Component {
// 定义列表的初始状态数据
state = {todos: [
{id:'001',name:'吃饭',done: true},
{id:'002',name:'睡觉',done: true},
{id:'003',name:'写代码',done: false},
]}
// 获取Header组件收集的任务项数据
addTodo = (todoObj) => {
const { todos } = this.state
const newTodo = [todoObj, ...todos]
this.setState({todos:newTodo})
}
// 更新状态数据
updateTodo = (id,done) => {
const { todos } = this.state
const newTodos = todos.map(todoObj=>{
if (id === todoObj.id) return {...todoObj,done}
return todoObj
})
this.setState({todos:newTodos})
}
// 删除状态数据
deleteTodo = (id) => {
const { todos } = this.state
const newTodos = todos.filter((todo)=>{
return todo.id !== id
})
this.setState({todos: newTodos})
}
render() {
const { todos } = this.state
return (
<div className="todo-container">
<div className="todo-wrap">
<Header addTodo={this.addTodo}/>
<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
<Footer/>
</div>
</div>
)
}
}
这里我们是通过id
来过滤数组的,把我们要删除的任务项给过滤掉。
- 2、在List组件里面接收该属性,并做好props限制
export default class List extends Component {
// 对props做类型和必要性的限制
static propTypes = {
updateTodo: PropTypes.func.isRequired,
todos: PropTypes.array.isRequired,
deleteTodo: PropTypes.func.isRequired
}
render() {
const {todos,updateTodo,deleteTodo } = this.props
return (
<ul className="todo-main">
{
todos.map(todo=>{
return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={deleteTodo} />
})
}
</ul>
)
}
}
- 3、在Item组件里面给删除按钮添加点击事件
export default class Item extends Component {
// 初始化状态数据
state = {mouseIn:false}
// 鼠标移入移出回调函数
mouseHandle = (flag) => {
this.setState({mouseIn:flag})
}
// 更新任务项状态
checkHandle = (id,event) => {
this.props.updateTodo(id,event.target.checked)
}
// 删除任务项
deleteHandle = (id) => {
if(window.confirm('确定删除该任务吗?')) {
this.props.deleteTodo(id)
}
}
render() {
const {id,name,done} = this.props
const {mouseIn} = this.state
return (
<li onMouseEnter={()=>this.mouseHandle(true)} onMouseLeave={()=>this.mouseHandle(false)} style={{backgroundColor: mouseIn?'gainsboro':''}}>
<label>
<input type="checkbox" defaultChecked={done} onChange={event=>this.checkHandle(id,event)}/>
<span>{name}</span>
</label>
<button onClick={()=>this.deleteHandle(id)} className="btn btn-danger" style={{display:mouseIn?"block":"none"}}>删除</button>
</li>
)
}
}
- 最后看看效果
至此我们就实现对Todolist的删除功能。