在web应用开发当中,表单还是很重要的元素。

应用表单组件有:文本框(input、textarea)、单选按钮和复选框、Select组件。

文本框:文本框的状态改变即文本框中的内容的改变。此时的state应该是inputValue或者是textareaValue。在状态改变时的处理函数应该是

handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}

单选按钮和复选框:

1.单选按钮:它的状态state就是radioValue

this.state = {
radioValue:''
};
//在这里只是设置了radioValue的值,因为单选按钮本来就是只有一个按钮被选中
//当用户点击单选按钮的时候,就会通过下面的函数获取到选中的按钮的value
//即radioValue
handleChange(e){
this.setState({
radioValue:e.target.value,
})
} //下面通过===一次判断每个input标签的值和radioValue是否相等来判断checked的值是true还是false
<input
type="radio"
value="male"
checked={radioValue === 'male'}
onChange = {this.handleChange}
/>
<input
type="radio"
value="female"
checked={radioValue === 'female'}
onChange={this.handleChange}
/>

2.复选框:它的状态是通过一个数组来保存的,因为复选,即就应该保存选中的多个复选框,以便用户进行操作,从而改变状态而重新渲染。

this.state = {
coffee:[],
}
//通过一个数组来保存状态
handleChange(e){
const {checked,value} = e.target;
let {coffee} = this.state; //判断这个复选框是否被选中
if(checked && coffee.indexOf(value) === -1){
coffee.push(value);
}else{
coffee = coffee.filter(i => i !== value);
} this.setState({
coffee,
});
}

然后通过coffee.indexOf('aa') 去遍历coffee这个数组,是否能找到和aa相同的字符串,来进行复选框checked是true还是false的判断。

<p>请你选择你最喜欢的咖啡</p>
<label>
<input
type="checkbox"
value="aa"
checked={coffee.indexOf('aa') !== -1}
onChange={this.handleChange}
/>
aa
</label>
<br/>
<label>
<input
type="checkbox"
value="bb"
checked={coffee.indexOf('bb') !== -1}
onChange={this.handleChange}
/>
</label>

Select组件:如果是单选,就用单个变量保存,如果是多选就用一个数组保存。

1.单选:

this.state = {
area:'',
} handleChange(e){
this.setState({
area:e.target.value,
});
} render(){
const {area} = this.state; return(
<select value={area} onChange={this.handleChange}>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
)
}

2.多选

this.state = {
area:['beijing','shanghai'],
}; handleChange(e){
const {options} = e.target;
//注意,这里返回的options是一个对象,并非数组
const area = Object.keys(options).
filter(i => options[i].selected === true)
.map(i => options[i].value); this.setState({
area,
});
} render(){
const {area} = this.state;
return(
<select multiple={true} value={area} onChange={this.handleChange}>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
);
}

React中的表单元素的更多相关文章

  1. React中的表单应用

    React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getIn ...

  2. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  3. 详解HTML中的表单元素

    代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  5. React中redux表单编辑

    reduxForm中反写数据在输入框中,数据是从别的模块拉取 // 编辑应用表单 class EditCode extends React.Component { constructor(props) ...

  6. 关于struts中的表单元素- Form bean not specified on mapping for action: "helloa.do"报错

    今天测试struts时仿照书上写了一个小的表单提交代码 <html:form action="helloa.do" method="post"> & ...

  7. JQuery中根据表单元素动态拼接json 字符串

    // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. angular 表单元素的使用总结

    工作中form表单元素最常用的是input,问题没有太多,现在总结下select ,radio组,checkbox的使用 1 select 常用的使用方式,如下 var Cityis = [{id:0 ...

  9. 表单元素(控件)不可见,你用visibility还是display?(转)

    属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...

随机推荐

  1. Opencv模块功能介绍

    本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/   站在巨 ...

  2. Linux 入门记录:一、命令行 Bash 的基本操作

    为了以后长期的线上测试和服务器的性能考量,要用 Linux 服务器了.昨晚装了个 CentOS 6.9,今天开始学学 Linux 基础,扫扫盲.ok,小本本记 ing... 一.Shell简介 She ...

  3. 檢查 cpu 的全部 gpio 狀態及設定

    $ adb root # cat /sys/kernel/debug/gpio

  4. 给windows设置隐藏文件夹的方法

    cls @ECHO OFF title Folder Private if EXIST "HTG Locker" goto UNLOCK if NOT EXIST Private ...

  5. 64_g4

    gnatcoll-2014-10.fc26.x86_64.rpm 28-Feb-2017 17:44 1738266 gnatcoll-devel-2014-10.fc26.i686.rpm 28-F ...

  6. 下载 LFS所需要的源码包的脚本程序及检验方法

    下载 LFS所需要的源码包的脚本程序及检验方法 http://blog.csdn.net/yygydjkthh/article/details/45315143

  7. c json实战引擎四 , 最后❤跳跃

    引言  - 以前那些系列 长活短说, 写的最终 scjson 纯c跨平台引擎, 希望在合适场景中替代老的csjon引擎, 速度更快, 更轻巧. 下面也是算一个系列吧. 从cjson 中得到灵感, 外加 ...

  8. System.getProperty方法中输出路径的方法

    package codegenerator;/** *@author Eilen *@date 2017年9月27日---下午3:15:09 *@描述: *@answer */public class ...

  9. leetcode 121 122 123 . Best Time to Buy and Sell Stock

    121题目描述: 解题:记录浏览过的天中最低的价格,并不断更新可能的最大收益,只允许买卖一次的动态规划思想. class Solution { public: int maxProfit(vector ...

  10. Leetcode 之Binary Tree Postorder Traversal(45)

    层序遍历,使用队列将每层压入,定义两个队列来区分不同的层. vector<vector<int>> levelorderTraversal(TreeNode *root) { ...