本小节，我们来实现最后的Footer组件的功能，它的功能主要有：
- 记录已完成和全部的任务列表数量
- 点击【复选框】可以实现全选和全不选
- 点击【删除已完成】按钮，可以将选中的任务项删除掉
实现已完成和全部的任务列表数量
步骤1：在App组件将todos的状态通过props传递给Footer组件
<Footer todos={todos} />
步骤2：Footer组件接收数据并计算长度
export default class Footer extends Component { render() { const {todos} = this.props // 计算列表的长度 const len = todos.length // 计算已完成的列表长度 const doneLen = todos.reduce((pre,cur)=>{ return pre + (cur.done ? 1:0) },0) return ( <div className="todo-footer"> <label> <input type="checkbox"/> </label> <span> <span>已完成{doneLen}</span> / 全部{len} </span> <button className="btn btn-danger">清除已完成任务</button> </div> ) } }
步骤3：查看效果
可以看到我们选中和取消选中时，已完成和全部的长度变化，和我们期望的一样。
实现【复选框】可以实现全选和全不选
- 1、在
App组件里面编写函数逻辑,并传递函数给Footer组件
// 实现全选和全不选 selectAllData = (done) => { console.log(done) const {todos} = this.state const newTodos = todos.map(todo=>{ return {...todo,done} }) this.setState({todos:newTodos}) }
<Footer todos={todos} selectAllData={this.selectAllData} />
- 2、给props添加限制
// 对props做类型和必要性的限制 static propTypes = { selectAllData:PropTypes.func.isRequired, }
- 3、给
Footer组件的复选框添加属性和事件回调
// 全选和全不选的事件回调 checkAllHandle = (event) => { this.props.selectAllData(event.target.checked) }
<input type="checkbox" checked={len === doneLen && len!==0 ? true:false} onChange={this.checkAllHandle} />
- 4、查看效果
为什么没有效果呢？难道是我代码写的有问题？检查了一下，代码确实有问题，但是不是这里的问题，而是在Item组件里面的复选框的defaultChecked属性的问题。我们改为checked属性就好。
<input type="checkbox" defaultChecked={done} onChange={event=>this.checkHandle(id,event)}/>
===>
<input type="checkbox" checked={done} onChange={event=>this.checkHandle(id,event)}/>
修改好后，我们再看效果：
我们看到已经可以全选和全不选了。
实现【删除已完成】按钮，可以将选中的任务项删除掉
- 1、在
App组件里面编写好删除已完成的列表数据的函数代码逻辑，并传递给Footer组件
// 删除已完成的任务项 deleteDoneData = () => { const {todos} = this.state const newTodos = todos.filter(todo=>{ return !todo.done }) this.setState({todos:newTodos}) }
<Footer todos={todos} selectAllData={this.selectAllData} deleteDoneData={this.deleteDoneData} />
- 2、给props添加限制
// 对props做类型和必要性的限制 static propTypes = { selectAllData:PropTypes.func.isRequired, deleteDoneData:PropTypes.func.isRequired }
- 3、给【删除已完成】按钮添加点击事件回调函数
// 删除已完成的任务项 deleteDoneHandle = () => { this.props.deleteDoneData() }
<button onClick={this.deleteDoneHandle} className="btn btn-danger">清除已完成任务</button>
- 4、查看效果
由图可知该功能已完成。
查看完整功能
小总结
- 熟悉数组函数
reduce/map/filter... - 了解
react中的defaultChecked与checked属性的区别
defaultChecked和checked是React中用于处理表单元素的两个属性。它们之间的区别在于：
defaultChecked是用于设置表单元素的默认选中状态的属性。当组件首次渲染时，如果没有传递checked属性，则会使用defaultChecked属性来设置表单元素的选中状态。如果传递了checked属性，则defaultChecked属性将被忽略。
checked是用于设置表单元素的选中状态的属性。当组件渲染时，如果传递了checked属性，则会使用该属性来设置表单元素的选中状态。如果没有传递checked属性，则会使用defaultChecked属性来设置表单元素的选中状态。
简单的说： defaultChecked属性 用于设置复选框的 默认选中状态，而 checked属性 用于设置复选框的 当前选中状态。当复选框的选中状态发生变化时，我们使用onChange事件处理程序来更新组件的状态 。checked属性要配合onChange事件处理一起使用，不然react会报错。
