react学习之key与表单

                                                              react学习之key与表单

1.key

在react的数组中，你必须要保证下面的这点，那就是你们数组的每一项都必须有个key值，因为键帮助React识别哪些项已经更改、添加或删除。数组内的元素必须有键，以确保元素有一个稳定的标识。

在这个例子中，我们使用了数组的map方法去返回一个新的数组，并且为每一项的内容都添加了一个key值。在上面我们已经说到key值必须有一个稳定的表示，在这里我们可以理解为一个唯一的表示。所以这个表示最好是一个字符串，其次是不同于任何一项的数字，最后就是数组中的index。以index去做为key值，一般不采用。因为在数组中，当你插入一项或者去改变一项的时候，里面的index是会发生改变的。因为不建议采用index值来作为key。

key正确的使用形式，应该将key在最外部，而不是在包裹的内容之间，下面的例子正好能说明这个。

在上面的这个例子中，可以看到，key是放在这个返回的一个组件的最外面包裹层上。可以试试，当最外层的包裹层上的key放在其他位置上时，在react中是不被允许的。

另外，key可以作为一个提示在react上，但是不能去对key进行提取，你可以采用另外的名称去代替key中的内容，然后再来调用key。例如在下面的例子中，

2.表单

在大多数情况下，使用JavaScript函数处理表单的提交并访问用户输入到表单中的数据是很方便的。实现这一目标的标准方法是使用一种称为“受控组件”的技术。

那么什么是受控组件呢？受控组件可以分为两部分来理解，第一：react中的state是单一的数据源， 第二：呈现表单的组件，也承担着用户的数据输入。

在上面的这个例子中，我们需要完成上面的根据显示并且输出内容，就用到了受控组件。其很好的体现了受控组件中的内容描述。

3.select标签

在上面的这个例子中，我们使用了select标签，其内部存放的就是所要选择的内容，并且通过其上面的onChange事件来接受下面获取的选择值，然后再用onSubmit事件，在页面上显示其选择的内容。

4.处理多个输入

当你需要去处理多个输入的时候，一般的情况下，所采用的方式是增加一个name属性给每一个输入，然后再用event.target.name来对输入进行处理。上面的code就是一个很好的例子。