控制全选状态——arr.every()-判断数组中是否所有元素都满足条件,如果都满足就返回true,否则返回false & every()-一假即假 & some()-一真即真
src/views/List.js
let {toggleAll} = this.props
<label onClick={toggleAll.bind(null, isAll)} htmlFor="toggle-all">全部标记为完成</label>
toggleAll: (isAll) => {
// console.log(isAll) //false
// 控制所有列表项切换
let action = Actions.toggleAllAction(isAll)
dispatch(action)
},
在src/store/ActionCreator.js中
/*
ActionCreator 本质上是函数,用于创建Action
Action的本质是一个普通对象
*/
export const addTaskAction = (etitle) => {
return {
type: 'todos_add',
etitle: etitle
}
}
export const deleteTaskAction = (id) => {
return {
type: 'todos_delete',
id: id
}
}
export const toggleItemAction = (id) => {
return {
type: 'todos_toggle_item',
id: id
}
}
export const toggleAllAction = (isAll) => {
return {
type: 'todos_toggle_all',
flag:isAll
}
}
在src/views/List.js
//全选按钮的状态
function mapStateToProps (state) {
// 动态计算全选按钮的状态:如果所有的条目都被选中,那么全选按钮的状态就是true,只要有一个没有选中就是false
// 数组的方法every作用:判断数组中是否所有元素都满足条件,如果都满足就返回true,否则返回false
let isAll = state.todos.every(item => {
return item.done
})
return {
// 从唯一的数据源当中获取状态数据即可
todos: state.todos,
isAll: isAll
}
}
toggleAll: (isAll) => {
// 控制所有列表项切换
let action = Actions.toggleAllAction(isAll)
dispatch(action)
}
- 数据变更
src/store/Reducer.js
case todos_toggle_all:
// 控制所有列表项切换:
newState = JSON.parse(JSON.stringify(state))
newState.todos.forEach(item => {
item.done = !action.flag
})
return newState
全选状态-效果