本小节，我们来实现列表的删除按钮的功能，点击删除按钮，弹出一个弹出是否删除的弹窗，点击确定删除，点击取消就不删除。
因为我们之前已经写过祖孙组件的通信了我们直接写代码：
- 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的删除功能。
