fullstackReact 学习笔记forms(一）基本按钮

form将网站变为app，form看起来简单，仅仅是form标签下包裹着一些input标签和submit,但是真正的建立一个内容丰富，便于交互、易于使用的表单其实涉及到很大的工作量：

1、通过form中的输入改变前端页面和服务器端的数据。

2、同步改变页面中的数据。

3、鉴于用户输入数据的不可知性，我们需要拒绝不符合要求的用户输入

4、当用户输入不合要求时候，应该给予明确的提示

5、不同的用户输入之间可能存在的逻辑关系

6、当数据同步至服务器时候，我们应该提示正在进行的工作，而不是让用户傻傻的看着不动的页面。

7、测试我们设计的forms

（一）、基本按钮

添加两个基本按钮button，为每个按钮添加一个处理方法，并且给每个按钮一个name和value,当用户点击不同的按钮时候触发不同的处理方法，用于交互。

（二）、事件及事件处理函数

在react中当事件发生时，将会把event作为参数传递给事件处理函数，并且执行对应的事件处理函数。事件处理函数式在事件发生时才调用，因此在绑定时间处理函数时候使用

onClick={this.onGreatClick} 而不是使用onClick={this.onGreatClick（）} 

每个事件event都包含了大量的信息，包括鼠标的屏幕坐标，建立指向被点击的元素的指针，可以通过该指针定位被点击的元素。

（三）回到基本按钮

在基本按钮中我们为所有的button添加了不同的处理事件，如果随着按钮的增多，处理事件将变得很多，这显然是不合适的，最好的方法是让每个元素调用相同的处理事件，处理事件根据不同的元素返回不同的结果，类似于多态的概念。

通过事件event.target来获取button的属性，然后便可以对不同的点击事件作出不同的反映。

通过共享事件处理函数，我们现在可以任意的增加按钮，并将按钮指向this.onButtonClick，而无需再次对事件处理函数进行修改，大大的方便了程序的扩展。