用户登录

打开笔记 ... 会显示笔记里的内容,并且可以编辑笔记里的内容 .. 我们先找到项目的 Note 组件 .. 在组件的显示这里,找到使用了 Editor 组件的地方 ..

这里我们可以给 Editor 传递两个属性 .. 先添加添加一个 entity ... 对应的值就是 this.state.entity ,当前组件的 state 里的 entity 的值 ..

然后打开 Editor 这个组件 ...

在组件里面,添加一个 state ... 里面先添加一个 entity .. 对应的值就是从它爸爸,也就是 Note 那里传递过来的 entity 这个属性的值 .. this.props.entity

再添加一个 body ... 对应的值是 this.props.entity.body

在组件的显示这里,我们用一下组件的 state .. 在这个 textarea 元素里面,添加一个 defaultValue .. 对应的值就是 this.state.body

再到浏览器上试一下 .. 打开一个笔记内容 .. 现在里面会显示笔记的内容 ..

更新

现在我们要想办法保存在这里更新之后的笔记内容 .. 回到项目 .. 先打开 Note 组件 .. 在组件里,我们可以添加一个更新并且保存笔记用的东西 ..

先在文件的顶部,导入 database 里面的 loadCollection .. 还有 db 这两样东西 ..

然后在组件里,添加一个 updateEntity .. 接收一个 event 参数,它表示的是事件对象 ..

里面我们先添加一个 _body .. 它的值就是 event.target.value ,就是发生事件的那个元素里的值 ..

下面用一下 this.setState .. 设置一下 body 这个数据的值 ,让它等于 _body ..

然后用一下 loadCollection 这个方法 .. 获取到 notes 这个数据集合 .. 接着用一下 then ,得到的是 collection ... 里面先添加一个 entity .. 它的值是 this.state.entity

再设置一下这个 entity 的 body 的值 .. 让它等于新的 body 的值 .. 就是这个 _body

再去更新一下 entity 这个文档 .. 使用 collection 的 update 方法,把新的 entity 交给这个方法 ..

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

传递给子组件

现在我们可以把这个 updateEntity 用属性的方式传递给 Editor 组件去用,在 Editor 组件上发生输入事件,就用这个方法来处理 ..

添加一个 updateEntity 属性,对应的值就是 this.updateEntity ..

打开 Editor 组件 .. 在组件的 state 里面,可以添加一个 updateEntity ... 对应的值就是 this.props.updateEntity

再找到组件显示这里的 textarea .. 在上面绑定一个 input 事件 .. 里面可以先用一个箭头函数 .. 有一个 event 参数 .. 执行一下 this.state.updateEntity ... 带着这个 event 参数 ...

预览

现在我们可以再去预览一下 ..

打开一个笔记 ... 修改一下里面的笔记内容 ...

在 Editor 的文本区域里面发生输入事件,会执行 Note 组件里的 updateEntity ,它可以实时地把修改之后的内容保存到数据库里 ...

编辑笔记《 React:应用案例 》

统计

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

社会化网络

关于

微信订阅号

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