转自: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表单无法输入原因----约束性和非约束性组件的更多相关文章

  1. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  2. HTML 表单和输入<form><input>

    HTML <form> 标签 定义和用法: <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. ...

  3. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  4. AngularJS(五):表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

  5. [Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. HTML(五)列表,区块,布局,表单和输入

    HTML 列表 无序列表 Coffee Tea Milk 默认是圆点,也可以 圆圈 正方形 有序列表 Coffee Tea Milk Coffee Tea Milk 默认是用数字排序 大写字母 小写字 ...

  7. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  8. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  9. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

随机推荐

  1. MySql中LongText字段对应Hibernate映射文件的设置(转)

    <?xml version="1.0"?><!DOCTYPE hibernate-mapping PUBLIC     "-//Hibernate/Hi ...

  2. 机器学习第3课:线性代数回顾(Linear Algebra Review)

    3.1  矩阵和向量 如图:这个是 4×2 矩阵,即 4 行 2 列,如 m 为行,n 为列,那么 m×n 即 4×2 矩阵的维数即行数×列数 矩阵元素(矩阵项): Aij 指第 i 行,第 j 列的 ...

  3. Linux如何查找大文件

    https://www.cnblogs.com/kerrycode/p/4391859.html find . -type f -size +800M 如上命令所示,我们仅仅能看到超过800M大小的文 ...

  4. iOS小技巧 - 为按钮设置不同状态下的背景色

    我们知道直接在Storyboard中设置按钮的背景色是不能根据不同状态来更改的,那问题来了,如果我们需要在不同的状态下(比如按钮没有被按下或者被按下),使得按钮呈现不同的背景色怎么办? 比如上图左边是 ...

  5. 往MySQL数据库datetime类型字段中插入数据库的当前时间

    代码: StringBuilder sb = new StringBuilder(); sb.append(" insert into uosdetailfile ("); sb. ...

  6. 在vs2010中编译log4cxx-0.10.0具体方法(从下载、编译、解决错误具体介绍)

    一. 简单介绍 log4cxx是Java社区著名的log4j的c++移植版.用于为C++程序提供日志功能,以便开发人员对目标程序进行调试和审计,log4cxx是apache软件基金会的开源项目,基于A ...

  7. PHP中session详解

    SESSION 的数据保存在哪里呢?  当然是在服务器端,但不是保存在内存中,而是保存在文件或数据库中.  默认情况下,PHP.ini 中设置的 SESSION 保存方式是 files(session ...

  8. react-native 项目实战 -- 新闻客户端(1) -- 初始化项目结构

    1.在项目根目录新建Componet文件夹(专门用来放我们的自定义组件),里面新建Main.js.Home.js.Message.js.Mine.js.Find.js 2.修改 index.andro ...

  9. @Autowired @Transaction @Service同时出现。

    对于@Autowired,如果只写这些,肯定是根据类型自动装配这个没问题. @Service public class AcRoleServiceImpl implements AcRoleServi ...

  10. appium for mac 安装与测试ios说明

    一.安装 安装dmg,可以自己下载appium-1.4.0.dmg或者找rtx我要,文件过大不能添加附件. Appium提供了一个doctor,运行appium-doctor 如果有问题,Fix it ...