reactjs入门到实战(八)----表单组件的使用
表单组件支持几个受用户交互影响的属性:
value
,用于<input>
、<textarea>
组件。checked
,用于类型为checkbox
或者radio
的<input>
组件。selected
,用于<option>
组件。
在 HTML 中,<textarea>
的值通过子节点设置;在 React 中则应该使用 value
代替。
表单组件可以通过 onChange
回调函数来监听组件变化。当用户做出以下交互时,onChange
执行并通过浏览器做出响应:
<input>
或<textarea>
的value
发生变化时。<input>
的checked
状态改变时。<option>
的selected
状态改变时。
和所有 DOM 事件一样,所有的 HTML 原生组件都支持 onChange
属性,而且可以用来监听冒泡的 change
事件
受限组件:你修改之后不起作用需要通过oncahnge来响应
input textarea select是一样的
var Hello = React.createClass({
render:function(){
return(
<input type="text" value="Hello" />
);
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
不起作用的:需要改成
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return <input type="text" value={this.state.value} onChange={this.handleChange} />;
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return <textarea type="text" value={this.state.value} onChange={this.handleChange} />;
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {value: 'bj'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (<select id="city" name="city" value={this.state.value} onChange={this.handleChange} >
<option value='bj'>北京</option>
<option value='sh'>上海</option>
<option value='tj'>天津</option>
</select>
);
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function() {
return {male: true};
},
handleGender: function(e) {
var male = !!(e.target.value == 'MALE');
this.setState({
male: male
});
},
render: function() {
return (
<input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' />
<input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />
);
}
}); ReactDOM.render(
< Hello />,document.getElementById('example')
)
</script>
不受限组件:渲染出来的元素直接反应用户输入
reactjs入门到实战(八)----表单组件的使用的更多相关文章
- ReactJS实用技巧(2):从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- 【form】 表单组件说明
form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...
- 通过html()的方法获取文本内容, form表单组件显示的值与获取到的值不一致的问题
我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- django基础之day09,创建一个forms表单组件进行表单校验,知识点:error_messages,label,required,invalid,局部钩子函数,全局钩子函数, forms_obj.cleaned_data,forms_obj.errors,locals(), {{ forms.label }}:{{ forms }},{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- 文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码
开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...
- 为JQuery EasyUI 表单组件增加“焦点切换”功能
1.背景说明 在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...
随机推荐
- Struts2.3+Spring+iBatis 初学之问题判断
小白接下来将会总结下我再学习Spring的学习过程中(ssi框架)中遇到的问题,以后会不断的进行更新. 最容易犯的问题,就是声明bean的时候,属性引用其他声明的bean的时候,name没有进行好对应 ...
- RelativeLayout相对布局属性
RelativeLayout用到的一些重要的属性: 第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:layout_center ...
- 反射认识_04_反射调用类方法Method
包1: package ReflectionMethod; public class ReflectionMethod { String str1="str1"; public v ...
- Linux mail 命令参数
linux mail 命令参数: 使用mail发邮件时,必须先将sendmail服务启动. mail –s “邮件主题” –c”抄送地址” –b “密送地址” -- -f 发送人邮件地址 –F 发件人 ...
- ubuntu支持shh远程连接记录
打开终端输入sudo apt-get update更新软件库 在输入sudo apt-get install openssh-server下载ssh sudo /etc/init.d/ssh rest ...
- mysql字符串相关
使用MySQL,我们很多时候都会出现需要截取字符串的情况,所以关于字符串的截取的方式有必要记录下去. MySQL截取字符串的函数有: left(str, length):从左边开始截取,length是 ...
- Tomcat端口被占用快速解决方案
在dos下,输入 netstat -ano|findstr 8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill /pid 6856 /f //说明,运行 ...
- [转]微软SerialPort秘籍[SerialPort为什么死锁程序的分析]
既然是秘籍,显然是写一些大家不常找到的,MSDN里遗漏提示大家注意的东西. 用过.net 2.0中,自带SerialPort的人,大多都遇到过.莫名其妙的执行Close的时候会死掉的问题.而Wince ...
- awk 手册--【转载】
1. 前言 有关本手册 : 这是一本awk学习指引, 其重点着重于 : l awk 适于解决哪些问题 ? l awk 常见的解题模式为何 ? 为使读者快速掌握awk解 ...
- 每日一九度之 题目1023:EXCEL排序
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:18804 解决:4240 题目描述: Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能. 对每个测试用例 ...