[转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835
表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑。
React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们的使用方式更统一更规范。
约束性和非约束性组件
表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。
约束性组件,简单的说,就是由react管理了它的value,而非约束性组件的value就是原生的DOM管理的。
他们的写法上也有很大区别。
非约束性组件这么写:
<input type="text" defaultValue="a" />
这个 defaultValue
其实就是原生DOM中的 value
属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
而约束性组件是这么写的:
<input type="text" value={this.state.name} onChange={this.handleChange} />
//...省略部分代码
handleChange: function(e) {
this.setState({name: e.target.value});
}
这里,value属性不再是一个写死的值,他是 this.state.name
,而 this.state.name
是由 this.handleChange
负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程,实际它依然是通过设置input的value来实现的。
但是一定要注意,约束性组件显示的值和用户输入的值虽然很多时候是相同的,但他们根本是两码事。约束性组件显示的是 this.state.name
的值。你可以在handleChange中对用户输入的值做任意的处理,比如你可以做错误校验。
对比约束性组件和非约束性组件的输入流程:
- 非约束性组件: 用户输入A -> input 中显示A
- 约束性组件: 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A
正式因为这样,强烈推荐使用约束性组件,因为它能更好的控制组件的生命流程。
更统一和更规范的接口
React 把 input,textarea 和 select 三个组件做了抽象和封装,他们的用法变得非常统一,你基本上可以当做同一个组件来用。
他们现在有统一的 value 属性 和 onChange 事件,现在对于这三种组件你都可以这样写
<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} />
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
不过 chekbox有和上面三个不一样,因为checkbox改变的不是 value ,而是 checked 状态。
你可以这样写:
<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' />
一个示例
下面是一个包含了 input,textarea, select, radio 的表单,并且做了简单的校验:
var MyForm = React.createClass({
getInitialState: function() {
return {
email: "",
intro: "",
city: "hz",
male: true, //性别
emailError: "",
introError: ""
};
},
handleEmail: function(e) {
var value = e.target.value;
var error = '';
if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
error = '请输入正确的Email';
}
this.setState({
email: value,
emailError: error
});
},
handleIntro: function(e) {
var value = e.target.value;
var error = "";
if(value.length < 10) {
error = "介绍不能少于十个字";
}
this.setState({
intro: value,
introError: error
});
},
handleCity: function(e) {
var value = e.target.value;
this.setState({
city: value,
});
},
handleGender: function(e) {
var male = !!(e.target.value == 'MALE');
this.setState({
male: male
});
},
render: function() {
return (
<div>
<p>
<label htmlFor='email'>email:</label>
<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} />
<span>{this.state.emailError}</span>
</p>
<p>
<label htmlFor='intro'>intro:</label>
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
<span>{this.state.introError}</span>
</p>
<p>
<label htmlFor='city'>所在城市:</label>
<select name='city' id='city' value={this.state.city} onChange={this.handleCity}>
<option value='hz'>杭州</option>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>
</p>
<p>
<label>性别:</label>
<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' />
</p>
</div>
)
}
});
React.render(
<MyForm />,
document.getElementById("div1")
);
[转]React表单无法输入原因----约束性和非约束性组件的更多相关文章
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- HTML 表单和输入<form><input>
HTML <form> 标签 定义和用法: <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. ...
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- AngularJS(五):表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- [Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- HTML(五)列表,区块,布局,表单和输入
HTML 列表 无序列表 Coffee Tea Milk 默认是圆点,也可以 圆圈 正方形 有序列表 Coffee Tea Milk Coffee Tea Milk 默认是用数字排序 大写字母 小写字 ...
- 6. React 表单使用介绍
表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...
- React表单元素的使用
一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
随机推荐
- MySql中LongText字段对应Hibernate映射文件的设置(转)
<?xml version="1.0"?><!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...
- 机器学习第3课:线性代数回顾(Linear Algebra Review)
3.1 矩阵和向量 如图:这个是 4×2 矩阵,即 4 行 2 列,如 m 为行,n 为列,那么 m×n 即 4×2 矩阵的维数即行数×列数 矩阵元素(矩阵项): Aij 指第 i 行,第 j 列的 ...
- Linux如何查找大文件
https://www.cnblogs.com/kerrycode/p/4391859.html find . -type f -size +800M 如上命令所示,我们仅仅能看到超过800M大小的文 ...
- iOS小技巧 - 为按钮设置不同状态下的背景色
我们知道直接在Storyboard中设置按钮的背景色是不能根据不同状态来更改的,那问题来了,如果我们需要在不同的状态下(比如按钮没有被按下或者被按下),使得按钮呈现不同的背景色怎么办? 比如上图左边是 ...
- 往MySQL数据库datetime类型字段中插入数据库的当前时间
代码: StringBuilder sb = new StringBuilder(); sb.append(" insert into uosdetailfile ("); sb. ...
- 在vs2010中编译log4cxx-0.10.0具体方法(从下载、编译、解决错误具体介绍)
一. 简单介绍 log4cxx是Java社区著名的log4j的c++移植版.用于为C++程序提供日志功能,以便开发人员对目标程序进行调试和审计,log4cxx是apache软件基金会的开源项目,基于A ...
- PHP中session详解
SESSION 的数据保存在哪里呢? 当然是在服务器端,但不是保存在内存中,而是保存在文件或数据库中. 默认情况下,PHP.ini 中设置的 SESSION 保存方式是 files(session ...
- react-native 项目实战 -- 新闻客户端(1) -- 初始化项目结构
1.在项目根目录新建Componet文件夹(专门用来放我们的自定义组件),里面新建Main.js.Home.js.Message.js.Mine.js.Find.js 2.修改 index.andro ...
- @Autowired @Transaction @Service同时出现。
对于@Autowired,如果只写这些,肯定是根据类型自动装配这个没问题. @Service public class AcRoleServiceImpl implements AcRoleServi ...
- appium for mac 安装与测试ios说明
一.安装 安装dmg,可以自己下载appium-1.4.0.dmg或者找rtx我要,文件过大不能添加附件. Appium提供了一个doctor,运行appium-doctor 如果有问题,Fix it ...