笔记的详细内容我想默认把它们隐藏起来，按下笔记的标题可以打开当前笔记的详细内容，然后可以去编辑里面的内容 ..

在 Note 组件的 state 里面，先添加一个新的数据，名字叫 open .. 让它先等于 false ... 这个 open 可以表示笔记是打开还是关闭 ..

浏览到组件的显示这里 .. 这个 Editor 组件就是显示还要编辑笔记内容的地方 .. 在它周围， 我们可以这样 .. 一组大括号 .. this.state.open && ..

这样如果 state 里的 open 的值是 false，就不会显示这个 Editor 组件 ..

下面这个垃圾筒小图标也可以这样处理一下 .. 一组大括号 .. this.state.open && ..

现在笔记的编辑器默认就会被隐藏起来 ..

再回到 Note 组件 ..

找到这个标题元素 .. 在上面绑定一个 click 事件 .. 用一下组件的 toggle 来处理 ..

在组件里面，我们可以再添加一个 toggle ... toggle = {} 注意这里我用的是类的属性初始器这种语法创建的这个 toggle ..

在它里面，用一下 this.setState .. 这里我们可以给这个 setState 一个方法参数 .. 这个就去有个 prevState ，表示组件之前的状态 ..

方法 return .. 一个 open .. 对应的值是 !prevState.open .. 就是把当前 open 这个数据，设置成之前的数据里的 open 的相反的值 ..

预览

再预览一下 .. 按一下笔记的标题 .. 会打开笔记的编辑器 .. 再按一下，会隐藏笔记的编辑器 ..

下面这行无笔记提示我们可以再去处理一下 ..

打开 Notes 组件 ... 找到这行文件所在的元素 .. 周围用一组大括号 .. !entities.length && .. 意思就是，如果没有要显示的笔记列表，才会显示这行提示文字 ...

现在这行无笔记提示文字没有显示 .. 因为现在界面上有要显示的笔记列表 ..