前言
博主主页??蜡笔雏田学代码
专栏链接??React专栏
之前学习了Mobx集中状态管理工具
参考文章??【MobX集中状态管理工具】MobX真的取代了Redux吗
今天来学习关于Mobx的一个小案例！
感兴趣的小伙伴一起来看看吧~?
Todos综合案例
效果
Mobx和React的职责划分
列表渲染
src/Todo/index.js
import './index.css' import { useStore } from '../store' import { observer } from 'mobx-react-lite' function Task () { const { taskStore } = useStore() return ( section className="todoapp"> section className="main"> ul className="todo-list"> {/* 列表区域 */} {taskStore.list.map(item => ( li className="todo" key={item.id} > div className="view"> input className="toggle" type="checkbox" /> label >{item.name}/label> button className="destroy"}>/button> /div> /li> ))} /ul> /section> footer className="footer"> span className="todo-count"> 任务总数: {10} 已完成: {1} /span> /footer> /section> ) } export default observer(Task)
单选实现
实现思路和步骤：本质上是在实现双向绑定
- 通过store中的数据状态 isDone字段，绑定到input元素的 checked属性上
- 监听事件，调用mobx的对应方法，传入id，找到要修改的项，把isDone字段取反操作
src/store/taskStore.js
import { makeAutoObservable } from 'mobx' class TaskStore { list = [ { id: 1, name: '学习react', isDone: true }, { id: 2, name: '搞定mobx', isDone: false } ] constructor() { makeAutoObservable(this) } // 单选操作 singleCheck(id, isDone) { // 查找 const item = this.list.find(item => item.id === id) item.isDone = isDone } } export default TaskStore
src/Todo/index.js
// 单选受控
// 思想：mobx Store去维护状态，input只需要把e.target.checked交给store让它来进行维护
function onChange(id, e) {
// console.log(id, e.target.checked)
taskStore.singleCheck(id, e.target.checked)
}
...
{/* 单选框 受控和非受控 受控的方法*/}
input className="toggle" type="checkbox" onChange={(e) => onChange(item.id, e)} />
...
全选功能
实现思路和步骤:
- 实现数据驱动权限UI显示，通过计算属性 + every方法
- 实现点击权限，控制所有子项，change事件拿到e.target.checked，遍历list进行isDone赋值
src/store/taskStore.js
// 全选操作
allCheck(checked) {
// 把所有项的isDone属性，都按照传入的最新的状态修改
this.list.forEach(item => {
item.isDone = checked
})
}
// 计算属性 只有所有子项都是选中的时候，才是选中的状态
get isAll() {
return this.list.every(item => item.isDone)
}
src/Todo/index.js
// 全选
function allChange(e) {
taskStore.allCheck(e.target.checked)
}
...
{/* 全选框 */}
input
id="toggle-all"
className="toggle-all"
type="checkbox"
checked={taskStore.isAll}
onChange={allChange} />
删除功能
实现思路和步骤：
在mobx中定义好删除数据的方法
点击删除，调用mobx提供的删除方法，传出id，进行删除
src/store/taskStore.js
// 删除操作
delTask(id) {
this.list = this.list.filter(item => item.id !== id)
}
src/Todo/index.js
// 删除
function delTask(id) {
taskStore.delTask(id)
}
...
{/* 删除按钮 */}
button className="destroy" onClick={() => { delTask(item.id) }}>/button>
回车新增功能
实现思路和步骤:
- 在mobx中编写新增方法的逻辑
- 在组件中通过受控方式维护输入框中的数据
- 在组件中监听keyUp方法 判断当前是否点击的是回车键 如果是 调用mobx的方法进行新增
src/store/taskStore.js
// 新增
addTask(task) {
this.list.push(task)
}
src/Todo/index.js
// 新增用户输入,受控方式维护输入框数据 const [taskValue, setTaskValue] = useState('') function insertTask(e) { if (e.keyCode !== 13) return if (e.target.value.trim() === '') { alert('输入的内容不能为空') return } taskStore.addTask( { id: nanoid(), name: taskValue, isDone: false } ) setTaskValue('') // e.target.value = '' } ... {/* 新增输入框 */} input className="new-todo" autoFocus autoComplete="off" placeholder="What needs to be done?" value={taskValue} onChange={(e) => setTaskValue(e.target.value)} onKeyUp={(e) => { insertTask(e) }} />
统计计数功能
实现思路和步骤:
- 在mobx中编写已完成的数量的计算属性的逻辑
- 在组件中调用渲染
src/store/taskStore.js
// 已完成的数量的计算属性
get isFinishedLength() {
return this.list.filter(item => item.isDone).length
}
src/Todo/index.js
footer className='footer'>
span className='todo-count'>
任务总数：{taskStore.list.length} 已完成：{taskStore.isFinishedLength}
/span>
/footer>
今天的分享就到这里啦✨
\textcolor{red}{今天的分享就到这里啦✨}
今天的分享就到这里啦✨
原创不易，还希望各位大佬支持一下
\textcolor{blue}{原创不易，还希望各位大佬支持一下}
原创不易，还希望各位大佬支持一下
?
点赞，你的认可是我创作的动力！
\textcolor{green}{点赞，你的认可是我创作的动力！}
点赞，你的认可是我创作的动力！
⭐️
收藏，你的青睐是我努力的方向！
\textcolor{green}{收藏，你的青睐是我努力的方向！}
收藏，你的青睐是我努力的方向！
✏️
评论，你的意见是我进步的财富！
\textcolor{green}{评论，你的意见是我进步的财富！}
评论，你的意见是我进步的财富！