react实现单选框、复选框和下拉框

    react和vue已经是当下前端开发领域的主流框架。确实极大程度的提高了开发效率。在博文 vue.js实现单选框、复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。

一、react开发模板

    使用react进行网页开发，其基本结构如下：

在head部分，引入了三个非常重要的js文件。其作用分别为：

• react.js：React的核心库
• react-dom.js：提供与DOM相关的功能
• browser.js：实现JSX语法向JavaScript语法的转换

 另一个值得注意的地方在于body标签内，script标签的type属性设置为：text/babel。这是因为react的JSX语法与JavaScript语法不兼容，凡是用到JSX语法的地方都需要设置type属性。

二、react实现单选框

    在HTML当中，一些表单元素会根据用户的输入更新某些属性值。而在react中，这些可变的状态通常保持在组件的状态属性中，并且只能用setState( )方法更新。

    利用react实现单选框，其body部分的代码如下：

由以上代码可以看到，监听每个input标签的onChange事件，并在相应函数里更新组件状态。

三、多选框

    多选框的实现方式和单选框类似，也可以通过监听各input标签的onChange事件来实现。其body部分的标签如下所示。

从代码中可以看到，我们定义了一个组件状态value，其值是一个数组，存放着选中信息。需要注意的是，在handleChange函数中，更新value时，必须使用setState函数，否则代码不会被重新渲染，在return中显示已选中的选项不会实时更新。

四、下拉框

下拉框的实现方式和单选框、复选框类似，这里直接以一个例子说明，其body部分的代码如下：

以上代码中，组件状态value给了一个默认值，并在return中的select标签中使用，这些实现的是一个默认选中的功能。

总之，利用react实现表单的原理都是相同的，利用一个组件状态来存储选中信息，然后监听各input标签的onChange事件。并在响应函数中更新组件状态。