在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. Java开源爬虫框架crawler4j

    花了两个小时把Java开源爬虫框架crawler4j文档翻译了一下,因为这几天一直在学习Java爬虫方面的知识,今天上课时突然感觉全英文可能会阻碍很多人学习的动力,刚好自己又正在接触这个爬虫框架,所以 ...

  2. angular数据绑定---js全局学习

    <!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> </he ...

  3. sicily 1020. Big Integer

    Description Long long ago, there was a super computer that could deal with VeryLongIntegers(no VeryL ...

  4. 小程序2(JSSDK,ECS搭建ftp服务器)

    JSSDK 开发步骤 绑定安全域名(域名绑定给任意一个公众号) 引入js 权限验证 wx.config({}) ready 所有的开发写在ready中 error 分享接口 onMenuShareTi ...

  5. tcpcopy 流量复制

    依赖 libpcap 线上服务器安装 https://github.com/session-replay-tools/tcpcopy.git 下载后解压 #--pcap-capture 默认raw s ...

  6. 【Spring事务的事务属性】

    大家都知道,Spring的声明式事务是通过事务属性来定义的,而spring的事务属性包含了5个方面:传播行为,隔离级别,是否只读,事务超时,回滚规则: 传播行为 传播行为,是属于事务边界相关的属性,定 ...

  7. 微信小程序实战篇-图片的预览、二维码的识别

    开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...

  8. Prometheus exporter的Node exporter是可以独立安装,用来测试的

    现在慢慢在把prometheus operator的一些概念组织完整. https://github.com/coreos/prometheus-operator/tree/master/contri ...

  9. Linux的文件帮助和运行级别

    man命令相关:man -1 +参数 表示查询第几章的帮助说明man -k +参数 表示以该参数为关键字查询所有相关命令或文件命令 --help 简单查询命令使用说明具体的帮助文档存储在/usr/sh ...

  10. 前端学习——css(初级)

    1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) ...