Google Keep Lite - 使用 reactjs 构建 Google Keep 克隆版

本博客将解释如何使用 reactjs 创建 Google Keep 克隆。

步骤 1

建立输入以引起注意

此输入框在点击时会像在 Google Keep 中一样显示打开。为此，状态已将visible设置为false，点击输入框的任意位置时，visible 将设置为true ，输入框将打开。点击关闭按钮时，visible 也将设置为false 。

步骤2

做笔记

为了记录笔记，我们使用了受控输入。它将接受用户的输入。状态有一个属性note。笔记的标题和输入将使用 handleChangeNote 函数进行更新。

然后，点击“关闭”按钮时，此注释将使用 unshift 方法附加到 state 的 notes_list 中。如果没有提供用户输入，则关闭按钮只会将 visible 设置为false以关闭输入。

步骤3

显示笔记

为了显示注释，我们使用了react-masonry-css。它是一个由 CSS 驱动的 Masonry 组件，专为 React 项目构建。

为什么选择 react-masonry-css？
我尝试过使用普通布局来显示所有音符，并将每个音符的高度设置为自动。但这个想法有一个问题：每行音符的高度都取最长音符的高度。因此，为了获得 Masonary 风格，我使用了 react-masonry-css。

安装
要安装 react-masonry-css，请在命令提示符中运行以下命令。

breakpointCols 用于定义布局中所需的列数。

为了显示 notes_list 中的每个注释，我使用了过滤器和映射方法。

步骤4

删除笔记

要删除一条笔记，我们需要将其从数组中移除。
为此，我使用了removeFromNotes函数。该函数会传入笔记索引进行调用，然后更新 notes_list 并返回除该笔记索引对应的笔记之外的所有笔记。

步骤5

置顶说明

点击固定按钮后，将运行一个以笔记 ID 作为参数的函数。该状态的属性pinned_id设置为null。此函数会将 pinned_id 设置为笔记 ID。因此，它会检查 pinned_id 是否为 null。如果不是，则已固定的笔记将显示在所有笔记之上。

要从固定笔记中删除一条笔记，我只需从 notes_list 中删除该笔记，并将 pinned-id 设置为 null，如上文 removeFromNotes 所示。

步骤6

搜索笔记

当要搜索的笔记被放入搜索栏时，状态的search属性会更新。search 属性初始设置为 null。之后，状态的serach_list 属性会更新，包含所有包含搜索内容的笔记。此操作通过对标题和笔记的输入使用includes方法完成。

为了显示搜索到的笔记，我们使用三元运算符来检查state 的search是否为空。如果不为空，则显示搜索到的笔记。

步骤7

编辑说明

当点击编辑按钮时，会运行一个函数，将布尔值showPopUp从 false 设置为 true，将 popup_id 设置为笔记 ID，并将editorial_note更新为笔记内容。因此，弹出窗口将显示，其 z-index 为 1。

注释中的任何更改都将由 handleChangeNote 函数处理。关闭按钮将运行一个函数，该函数将编辑后的注释更新到 notes_list 中。

步骤8

垃圾桶

垃圾箱将是一个不同的组件。上面提到的所有内容都将放在 Home 组件中。为了在不刷新页面的情况下从 Home 组件转到垃圾箱，需要使用react-router。首先，需要在命令提示符下运行安装命令 ( npm install react-router-dom ) 来安装 react-router-dom。