一、页面效果

二、页面结构

• 最外层使用Card组件包裹，头部文字因为需要样式，故使用h2标签(如没有样式需求可直接使用Card组件自带的title属性)。

• Input.Group可以同时管理多个Input组件，compact为紧凑模式。

• 列表部分：dataSource为列表数据源，列表的具体结构写在renderItem属性中。

  1. Popover组件为气泡卡片，主要为实现以下功能：
  2. List.Item为主要数据展示区。
  3. CloseCircleFilled为删除Item的图标

三、逻辑代码

1. 数据状态

• isShow为删除线的状态

• isTag为事项优先级状态

• myTeaxt为input输入框中的内容

2. 添加事项

• 复制一份newList；

• 对input输入框进行判断，如果为空不做任何行为，反之，将input的内容插入到newList的第一行：

  1. id为随机数；
  2. value为input的内容；
  3. isShow默认false；
  4. isTag默认gray灰色

• 最后setState，将newList更新到list，并且清空myText

效果

2. 删除事项

使用filter函数过滤，对传进来的item.id和newList进行比对，如果不一致，则为true返回，如果一致，则false不返回。

最后将过滤后的数据setState到list

效果

4. 添加删除线

因为isShow是布尔型，所以将newList中的isShow直接取反，再setState到list。 在DOM的样式中，只需要判断isShow的状态，根据状态添加样式。

效果

5. 气泡卡片优先级切换

1. 气泡卡片的内容由content提供 2. 定义气泡卡片内部的三个优先级按钮，并为每个按钮定义一个点击事件，指向同一个函数，只是传入的值不同。 3. 函数内部获取到传入的值，再根据得到的值进行switch判断，返回对应的颜色。

效果

四、额外：wallpaperEngine

由于wallpaperEngine不能实现直接键入内容，导致我们不能直接在桌面上使用input输入内容，需要调用系统的窗口进行中间操作:

首先为input添加一个点击事件 点击input，弹出系统prompt窗口，获取prompt上键入的内容，将内容赋值给value，再将value赋值给input。

最终效果

结束语

刚开始学React，利用拙劣的技术写了一个小东西，并且第一次尝试写这种文章，文辞粗浅，希望大家不吝赐教。