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 ...
随机推荐
- Opencv模块功能介绍
本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 站在巨 ...
- Linux 入门记录:一、命令行 Bash 的基本操作
为了以后长期的线上测试和服务器的性能考量,要用 Linux 服务器了.昨晚装了个 CentOS 6.9,今天开始学学 Linux 基础,扫扫盲.ok,小本本记 ing... 一.Shell简介 She ...
- 檢查 cpu 的全部 gpio 狀態及設定
$ adb root # cat /sys/kernel/debug/gpio
- 给windows设置隐藏文件夹的方法
cls @ECHO OFF title Folder Private if EXIST "HTG Locker" goto UNLOCK if NOT EXIST Private ...
- 64_g4
gnatcoll-2014-10.fc26.x86_64.rpm 28-Feb-2017 17:44 1738266 gnatcoll-devel-2014-10.fc26.i686.rpm 28-F ...
- 下载 LFS所需要的源码包的脚本程序及检验方法
下载 LFS所需要的源码包的脚本程序及检验方法 http://blog.csdn.net/yygydjkthh/article/details/45315143
- c json实战引擎四 , 最后❤跳跃
引言 - 以前那些系列 长活短说, 写的最终 scjson 纯c跨平台引擎, 希望在合适场景中替代老的csjon引擎, 速度更快, 更轻巧. 下面也是算一个系列吧. 从cjson 中得到灵感, 外加 ...
- System.getProperty方法中输出路径的方法
package codegenerator;/** *@author Eilen *@date 2017年9月27日---下午3:15:09 *@描述: *@answer */public class ...
- leetcode 121 122 123 . Best Time to Buy and Sell Stock
121题目描述: 解题:记录浏览过的天中最低的价格,并不断更新可能的最大收益,只允许买卖一次的动态规划思想. class Solution { public: int maxProfit(vector ...
- Leetcode 之Binary Tree Postorder Traversal(45)
层序遍历,使用队列将每层压入,定义两个队列来区分不同的层. vector<vector<int>> levelorderTraversal(TreeNode *root) { ...