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 ...
随机推荐
- SQL null值 查询null
select * from emp;
- .net开发之我见,or实现 最简 优化法。knock out type convert 与我之简化orm的实现原理及实现细则,最简化开发法
现在的.net or构架,大家认同的各种大大小小,ef,subsonic,nhibernate,甚至小一些的petapoco这种,但用过的人我想他们考虑的是比较多. 小一些的Petapoco也有几千行 ...
- 解决 Xamarin 拖拽Plain Text 于Layout上时 出现 “The layout could not be loaded:java.lang.System.arraycopy([CI[CII)V” 错误
右键项目属性
- UML:组件图
要搞清楚组件图,必须先搞清楚什么是组件? 组件有以下特点:1.能实现一定功能,或者提供一些服务.2.不能单独运行,要作为系统的一部分来发挥作用.3.在物理上独立的,不是逻辑上的概念.4.可单独维护.可 ...
- 五种常见的电子商务模式对比:B2B、B2C、C2B、C2C、O2O
电子商务模式是指企业运用互联网开展经营取得营业收入的基本方式,也就是指在网络环境中基于一定技术基础的商务运作方式和盈利模式.目前,常见的电子商务模式主要有B2B.B2C.C2B.C2C.O2O等几种, ...
- JSon_零基础_001_将布尔类型数组转换为JSon格式字符串,返回给界面
将布尔类型数组转换为JSon格式字符串,返回给界面 需要导入包: 编写bean: package com.west.webcourse.po; /** * 第01步:编写bean类, * 下一步com ...
- rails控制台进入
数据库控制台: rails db .help查看可使用的命令 rails控制台 rails c 普通ruby控制台: irb
- 13.熟悉JDK的配置,环境变量
已经做烂的东西,公司的新人环境配置手册文档Java方面的就是我写的,有意的留邮箱,很详细
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...