声明： React基础（一）的内容来自腾讯课堂 Web前端【红点工场】的视频，原作者是 Skipper 老师。

接下来，我们要把这种模式应用到前端开发常用的一个模块里面去，表单。

Demo 3：

首先，我们仍然做好准备工作：

那么第一件事，就是先设置 state。

那么你肯定会有一个疑问，表单有什么状态？

上一个 Demo 里面有个按钮，可以有喜欢和不喜欢，两种状态。

那么这里表单的 state 又是什么呢？

其实 state 是一个广泛的概念，表示应用程序的状态，或者说表示某个状态。

那么这里，如果我们要做表单的某个处理，它的状态就是 value。

因为对于表单来说，它的值是不断改变的。

准备工作做好了，那么接下来，我们就需要来做一个表单的控制或者验证了，比如我不允许你输入超过10个字。

首先，我们这个操作，只允许调用 setState 方法。也就是说 input.addEventListener 里面，只能调用 setState，你没有其他可选的了。 

然后我们再去更新 state 的状态，为表单的新值。

然后，我们在 input 框内随便输入几个值，并在控制台上打印 state。

可以看到，state 的值是不是和表单一一对应的，那么就是说，我们已经获取到表单的状态了。

那么接下来，我们再完成 render() 方法：

我们赋值 input 标签的 value，为 state 里面的 value。

看到这里，是不是有个疑问，觉得很多余？

我们在上面的 setState 方法里面，将 input 标签的 value 赋值给 state 的 value。

然后又在 render 方法里面，再赋值回来。

咱先不着急，我们可以先把 render 方法里面的 input.value = '' 赋值为一个空字符串。

那么现在 input 标签还能显示内容吗？

为了方便看到效果，加了一个 console.log。

那么我们每次输入的时候，它都会打印一次 input.value。

可以看到，不管我们怎么输入，input 框里面都没有反应，而打印出来的 input.value 也都是为空。

那么，为什么会这样呢？

因为我们每次输入 input 的时候，都会 setState()，也就是重新设置一次 state。

然后，把 { value: this.value } 这个新的状态，赋值给 state。

那么接下来，setState 会调用 render()，又重新给 input.value 赋值。但是在这里，我们是不停的赋值为空字符串。

那么也就导致了永远都是空了，你输入是没有效果的。

那么明白了这里，我们改回：input.value = state.value。

现在我们来输入一些内容，那么这时候，我们的 state 就永远都是和表单的数据是同步着的。

是不是觉得有点懵？没关系，我们慢慢来分析。

表单的数据是哪里来的？还是以前那样吗？不是。

现在我们输入之后，会去修改 state。

然后 state 在把这个内容，映射到表单上。

也就说，你看到的已经不再是你用键盘输入的内容了，你看到的是 state 的内容。

具体可以看下图：

那么我们输入1，就可以看到结果是来自 state。

是不是觉得很奇怪？那么这么做的意义又是什么呢？

不要着急，接下来你就明白了。

Demo 4：

首先，我们在 state 里面设置了2个状态。

value 是 input 标签的，error 是错误提示 p 标签的。

那么我们是不是就可以根据这两个状态，来渲染 HTML 的功能呢？

当我们在输入的时候，就会触发 input 事件，也就是触发了 handleInput() 方法，并且把我们输入的值 value 给传过去。

然后 handleInput 方法里面接收到了我们输入的 value 值，并进行一个判断。

如果我们输入的 value 长度，小于10，是合法的。那么我就根据你这个 value 值去更新我的状态。

如果你输入的长度超过10了呢？那么你就属于错误状态，我们就直接更新 error 这个状态。

接下来，我们跑下程序看看结果是什么样的。

为了方便观察，我仍然会在每次输入的时候，console.log 输出一下。

可以看到，当我们的输入长度超过10的时候，即便我们在按，也不能输入了。

为什么呢？

因为当我们输入的 value 长度超过10的时候，我们会把长度超过10的这个 value 传给 handleInput() 方法里面去。

那么 handleInput 里面就会进行判断，value 的长度小于10吗？很明显，超过了。

于是就走了 else 语句。也就是说，它并没有更新 state 里面的 value 了。

那么，最终我们在 render 的时候会把 input.value = state.value，也就是说，它就只会保留在上一步合法的 value 值了。

那么接下来，它不会更新 value，反而更新了 error 为 true。那么也就是会走 errorMsg.style.display = 'block'，那么错误提示也就显示出来了。

那么最后我们在来捋一遍：

首先，我们有个程序状态的中心，叫做 state。

然后 setState 方法，就只负责更新 state。

那 render 方法，就负责从 state 里面去取状态，去渲染到 HTML 里面。

HTML 页面里面，又提供了 Control，比如一些监听器 click 等等。

那当我们点击 click 的时候，它就会去调用 setState。

那么 setSate又会去更新 state ......

这个就是单项数据流。

操作只改变状态，然后状态在去修改页面，这样的话，整个程序的可读性，以及可拓展性就都变的非常的强了。

因为一切的东西都有自己不同的状态，而我们只需要负责修改状态，页面就会受我们的掌控。

这就是 react 的核心思想。