React可控组件与不可控组件
一、不可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>琛ㄥ崟璇﹁В</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
// var MyForm = React.createClass({
// render: function () {
// return <input
// type="text" defaultValue="Hello World!" />;
// }
// });
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
var helloTo = React.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input
ref="helloTo"
type="text"
defaultValue="Hello World!" />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
helloTo: "Hello World!"
};
},
handleChange: function (event) {
this.setState({
helloTo: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange} />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
React可控组件与不可控组件的更多相关文章
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- React Native 开发之 (07) 常用组件-View
掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的 ...
- React学习（一）父子组件通讯
React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...
- 【每天半小时学框架】——React.js的模板语法与组件概念
[重点提前说:组件化与虚拟DOM是React.js的核心理念!] 先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- React：受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- React中嵌套组件与被嵌套组件的通信
前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- React对比Vue（04 父子组件的通信 )
跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 ) vue的传递值差不多,传方法就不用了,子组件可以掉 ...
随机推荐
- Android编程: MVC模式、应用的生命周期
学习内容:Android的应用剖析.MVC模式.应用的生命周期 ＝＝＝＝Android的应用剖析＝＝＝＝ 一个Android应用程序会使用如下组件: Android Activities 界面 A ...
- c/c++中主线程退出，子线程也会退出
#include <windows.h> #include <process.h> /* _beginthread, _endthread */ #include <io ...
- vtune 不能查看pg的源代码
在编译的时候,要加enable-debug 选项 并且如果之前有没有加的话,一定要make clean
- 20145120 《Java程序设计》实验三实验报告
20145120 <Java程序设计>实验三实验报告 实验名称:敏捷开发与XP实践 实验目的与要求: XP基础 XP核心实践 相关工具 (一)敏捷开发与XP 极限编程(eXtreme Pr ...
- 网件无线网卡在windows 2012支持问题
网件的无线网卡的驱动是支持windows 8.1的,但是安装了驱动后,却没法启动网卡.网上搜索后发现,service里面网件有一进程没法启动:而2012年忘记官方论坛技术支持答复咨询居然说,网件驱动不 ...
- Careercup - Google面试题 - 6253551042953216
2014-05-06 01:49 题目链接 原题: Modify the following code to add a row number for each line is printed pub ...
- 使用sqlserver日期函数获取当前日期
使用sqlserver日期函数中的getdate()可以获取当现的日期,下面就将为您介绍这种使用sqlserver日期函数获取当前日期的方法,供您参考,希望对您学习sqlserver日期函数有所启迪. ...
- Microsoft SQL Server 存储过程举例
-- if SP is existed, drop it. if (object_id('InvHoldToDPS', 'P') is not null) drop proc InvHoldToDPS ...
- 【python】编码规范（转载）
转自:http://www.cnblogs.com/itech/archive/2012/01/06/2314454.html 1 编码 >>所有的 Python 脚本文件都应在文件头标上 ...
- extjs4与ckeditor、ckfinder整合
<script type="text/javascript"src="<?php echo Yii::app()->request->baseUr ...