React中的表单元素
在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中的表单元素的更多相关文章
- React中的表单应用
React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getIn ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- 详解HTML中的表单元素
代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- js动态的往表格中加入表单元素
效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...
- React中redux表单编辑
reduxForm中反写数据在输入框中,数据是从别的模块拉取 // 编辑应用表单 class EditCode extends React.Component { constructor(props) ...
- 关于struts中的表单元素- Form bean not specified on mapping for action: "helloa.do"报错
今天测试struts时仿照书上写了一个小的表单提交代码 <html:form action="helloa.do" method="post"> & ...
- JQuery中根据表单元素动态拼接json 字符串
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- angular 表单元素的使用总结
工作中form表单元素最常用的是input,问题没有太多,现在总结下select ,radio组,checkbox的使用 1 select 常用的使用方式,如下 var Cityis = [{id:0 ...
- 表单元素(控件)不可见,你用visibility还是display?(转)
属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...
随机推荐
- Java开源爬虫框架crawler4j
花了两个小时把Java开源爬虫框架crawler4j文档翻译了一下,因为这几天一直在学习Java爬虫方面的知识,今天上课时突然感觉全英文可能会阻碍很多人学习的动力,刚好自己又正在接触这个爬虫框架,所以 ...
- angular数据绑定---js全局学习
<!DOCTYPE html> <html ng-app> <head> <title>Simple app</title> </he ...
- sicily 1020. Big Integer
Description Long long ago, there was a super computer that could deal with VeryLongIntegers(no VeryL ...
- 小程序2(JSSDK,ECS搭建ftp服务器)
JSSDK 开发步骤 绑定安全域名(域名绑定给任意一个公众号) 引入js 权限验证 wx.config({}) ready 所有的开发写在ready中 error 分享接口 onMenuShareTi ...
- tcpcopy 流量复制
依赖 libpcap 线上服务器安装 https://github.com/session-replay-tools/tcpcopy.git 下载后解压 #--pcap-capture 默认raw s ...
- 【Spring事务的事务属性】
大家都知道,Spring的声明式事务是通过事务属性来定义的,而spring的事务属性包含了5个方面:传播行为,隔离级别,是否只读,事务超时,回滚规则: 传播行为 传播行为,是属于事务边界相关的属性,定 ...
- 微信小程序实战篇-图片的预览、二维码的识别
开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...
- Prometheus exporter的Node exporter是可以独立安装,用来测试的
现在慢慢在把prometheus operator的一些概念组织完整. https://github.com/coreos/prometheus-operator/tree/master/contri ...
- Linux的文件帮助和运行级别
man命令相关:man -1 +参数 表示查询第几章的帮助说明man -k +参数 表示以该参数为关键字查询所有相关命令或文件命令 --help 简单查询命令使用说明具体的帮助文档存储在/usr/sh ...
- 前端学习——css(初级)
1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) ...