新增功能

首先，我们需要为提交按钮绑定点击事件：

然后，在 ul 标签中使用 JSX 表达式来实现列表渲染，需要使用 map 函数对每一项进行循环操作，一个是每一项的内容，还有一个是每一项的下标：

接下来就是在点击提交时将输入框的内容添加到下面。不要关注 DOM 如何操作，关注数据如何传输：inputValue ----> List 就可以了。

但是，有一个写法需要注意：通过展开运算符 ... 来展开原先的 List 数组，然后加入新内容。新增的功能就完成了，但是可以进行一些改进，例如提交后清空输入框。这时只需要将 inputValue 改为空就可以了：

当 List 发生变化时，页面也会相应地发生变化。以前需要操作 DOM，现在 React 接管了这个映射操作。

此外，还会出现一个警告，这是因为我们在进行循环渲染时，React 提示需要给每一项加一个唯一的 key 值。目前我们可以使用下标 index 作为 key 值，但这是一个不好的习惯。可以先临时这样写一下。

删除功能

在渲染列表时，我们可以为每一项绑定一个事件：

具体的删除逻辑需要找到对应的 index 才能在数组中找到对应的位置，然后删除数据项。如何拿到新的参数呢？可以在 bind 上添加参数：

然后，在监听函数中就可以接收到这个参数了：

现在，获取下标的步骤已经完成了。删除怎么实现呢？不要操纵 DOM，而要操作数据！其实就是把绑定的数据（数组）进行修改就好了。

首先，拷贝一下状态数据：

然后，利用数组的 splice 方法来删除数据：

至此，以上操作就完成了。但是需要注意，以下写法是不可以的。React 有这样的原则：我们操纵的是 State 的副本内容，绝对不能直接修改 State 内容，否则会在性能优化时遇到问题。