表单组件支持几个受用户交互影响的属性:

  • 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入门到实战(八)----表单组件的使用的更多相关文章

  1. ReactJS实用技巧(2):从新人大坑——表单组件来看State

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  2. 【form】 表单组件说明

    form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...

  3. 通过html()的方法获取文本内容, form表单组件显示的值与获取到的值不一致的问题

    我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...

  4. 如何实现Ant design表单组件封装?

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  5. 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,局部钩子函数,全 ...

  6. 使用iview 的表单组件验证 Upload 组件

    使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...

  7. 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  8. 文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...

  9. 为JQuery EasyUI 表单组件增加“焦点切换”功能

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...

随机推荐

  1. Struts2.3+Spring+iBatis 初学之问题判断

    小白接下来将会总结下我再学习Spring的学习过程中(ssi框架)中遇到的问题,以后会不断的进行更新. 最容易犯的问题,就是声明bean的时候,属性引用其他声明的bean的时候,name没有进行好对应 ...

  2. RelativeLayout相对布局属性

    RelativeLayout用到的一些重要的属性: 第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:layout_center ...

  3. 反射认识_04_反射调用类方法Method

    包1: package ReflectionMethod; public class ReflectionMethod { String str1="str1"; public v ...

  4. Linux mail 命令参数

    linux mail 命令参数: 使用mail发邮件时,必须先将sendmail服务启动. mail –s “邮件主题” –c”抄送地址” –b “密送地址” -- -f 发送人邮件地址 –F 发件人 ...

  5. ubuntu支持shh远程连接记录

    打开终端输入sudo apt-get update更新软件库 在输入sudo apt-get install openssh-server下载ssh sudo /etc/init.d/ssh rest ...

  6. mysql字符串相关

    使用MySQL,我们很多时候都会出现需要截取字符串的情况,所以关于字符串的截取的方式有必要记录下去. MySQL截取字符串的函数有: left(str, length):从左边开始截取,length是 ...

  7. Tomcat端口被占用快速解决方案

    在dos下,输入  netstat   -ano|findstr  8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill  /pid  6856  /f //说明,运行 ...

  8. [转]微软SerialPort秘籍[SerialPort为什么死锁程序的分析]

    既然是秘籍,显然是写一些大家不常找到的,MSDN里遗漏提示大家注意的东西. 用过.net 2.0中,自带SerialPort的人,大多都遇到过.莫名其妙的执行Close的时候会死掉的问题.而Wince ...

  9. awk 手册--【转载】

    1. 前言 有关本手册 : 这是一本awk学习指引,  其重点着重于 : l         awk 适于解决哪些问题 ? l         awk 常见的解题模式为何 ? 为使读者快速掌握awk解 ...

  10. 每日一九度之 题目1023:EXCEL排序

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:18804 解决:4240 题目描述:     Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.     对每个测试用例 ...