用户登录

按一下这个 添加笔记 按钮,可以创建一条新的笔记内容 .. 先打开 Notes 这个组件 .. 找到组件显示这里的这个 添加笔记 按钮元素 ..

绑定一个点击事件 onClick .. 用一下组件的 this.createEntity 来处理这个事件 ..

在组件里再添加一个 createEntity ... 用的是属性初始化的语法 .. createEntity = () => {}

里面我们先用一下 loadCollection 这个方法来得到 notes 这个数据集合 ...

接着用一个 then .. 得到的是collection ...

里面添加一个 entity ... 用一下 collection 的 insert 这个方法,它可以在数据集合里插入新的文档 .. 给这个文档添加一个空白的 body 属性 .. 方法会返回创建的文档, 我们把这个文档交给了 entity ..

下面用一下 db 的 saveDatabase() 保存一下数据库 ..

然后再去设置一下组件的 State .. 用一下 this.setState .. 给它一个方法参数 .. 有个 prevState ,表示之前的数据 ..

里面添加一个 _entities ,它的值就是 prevState 下面的 entities

然后把新插入的笔记放到这个 _entities 的最上面 .. 用一下 unshift 这个方法,把 entity 交给这个方法 ..

return 一个对象 .. 里面添加一个 entities ,对应的值就是 _entities ...

预览

到浏览器上去预览一下 ...

按一个这个添加笔记按钮 .. 会在数据库里插入一个空白的文档 ..

这个新的文档会立即在界面上显示出来 ..

创建笔记《 React:应用案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点