从0学习React（5）---通过例子体会setState

上篇文章中，我们讲到了通过setState来更新组件的状态。我觉得上篇文章我讲的已经是比较详细的了，而且讲的很通俗易懂。但是上篇文章终归还是理论，没有实践，所以还是学了个表面而已。这篇文章我就结合一点实践来讲讲怎么使用这个setState。

先来看一下这个图：

现在这里有两个按钮：“未完成”和“已完成”，还有一个选项项：“故障状态”。

如果你点击未完成或者已完成按钮，虽然会显示对应的故障单，但是没有那种点击效果，就是点击按钮，按钮不会上色。那如果我想让按钮上色，应该怎么办呢？

未完成按钮是一个组件，这个按钮组件会有状态，那如果想上色的话，我们在按钮组件里加一个状态就好了。

第一步是在初始化状态的时候，给这个上色的状态加一个默认值，默认值为空，就是说第一次渲染的时候，按钮先不上色：

之后，找到未完成按钮的事件处理函数，在事件处理函数的setState更新状态中，加一个更新的状态，点击按钮就更新这个状态为cancel1

这样，在点击未完成按钮的时候，就有颜色出现了。同理，已完成按钮也是同样的操作。

这个时候，点击未完成按钮，未完成按钮高亮。点击已完成按钮，已完成按钮高亮。

请问这样可以了吗？不可以！

为什么不可以？我测试了一下发现，当我点击选项项的时候，按钮的高亮并不会消失。而且当我选择其中的一个选项的时候（比如待初诊），拿到的并不是待初诊的故障单，还是未完成或者已完成的故障单。所以我们需要找到选项项的代码，看看它的事件处理函数是什么样的：

看了这个代码，已经完全懂了。因为在点击的时候，这个状态更新没有将更新execStatus的值更新为空，而且没有将高亮更新为空，所以执行的时候execStatus==1，selectedButton==cancel1，这就不难解释为什么你点击待初诊选项的时候，这个未完成按钮高亮不会消失（因为selectedButton==cancel1），而且拿到的并不是待初诊的故障单而是未完成的故障单（因为execStatus==1）。

一句话讲就是这个选项项的setState没有更新这两个状态，你把这两个状态更新为null那就可以了：

试了一下，果然可以了。这就大功告成了。

这篇文章，我通过实践的方式讲了一下更新状态setState。当我解决完这个问题后，我发现我对于setState的理解更加透彻了。