一、不可控组件

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可控组件与不可控组件的更多相关文章

  1. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  2. React Native 开发之 (07) 常用组件-View

    掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的 ...

  3. React学习（一）父子组件通讯

    React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...

  4. 【每天半小时学框架】——React.js的模板语法与组件概念

           [重点提前说:组件化与虚拟DOM是React.js的核心理念!]        先抛出一个论题:在React.js中,JSX语法提倡将 HTML 和 CSS 全都写入到JavaScrip ...

  5. 5. React 组件的协同使用 组件嵌套和Mixin

            组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...

  6. React：受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  7. React中嵌套组件与被嵌套组件的通信

    前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...

  8. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  9. React子组件怎么改变父组件的state

    React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...

  10. React对比Vue（04 父子组件的通信 )

    跟vue差不多 都是props,但是react里面不仅可以给子组件传值,还可以传方法,MD尽然还可以把自己传给子组件,(卧槽vue可没有这个啊 )  vue的传递值差不多,传方法就不用了,子组件可以掉 ...

随机推荐

  1. [DHCP服务]——一个验证DHCP原理实验(VMware)

    大致实验拓扑图 DHCP Server端的配置 1. 安装DHCP # yum -y install dhcp 2. 拷贝配置文件 # /dhcpd.conf.sample /etc/dhcp/dhc ...

  2. 四则运算小程序测试--c++--软件工程课

    一.测试内容: 1.生成题目数是否准确?2.打印方式(列数l.行间距jj)是否准确?3.有无乘除法cc是否准确?4.数的范围fw是否准确?5.除法有无余数c是否准确?6.加减有无负数f是否准确? 二. ...

  3. C语言编写的随机产生四则运算测试题

    题目:编写一个四则运算测试题的程序,要求每道题都要随机产生 解题思路: 1.编写测试题,且为30道,就要用到循环函数,因此想到用for()函数 2.随机产生两个数,就想到用rand()函数. 注:1. ...

  4. gitlab&fengoffice的ldap配置

    1.fengoffice配置config/ldap_config.php $config_ldap = array ( 'binddn' => 'cn=admin,dc=xxx,dc=xxx', ...

  5. Java团队项目总结

    Java团队项目总结 1.项目实现情况 项目概述: 我们团队项目准备实现一个有关于大富翁有的游戏程序. 大富翁游戏,以经营权为主要的游戏方式,通过购买经营权与架构经营的星级服务来获得最大的利益,当其他 ...

  6. 搭建SpringMVC+MyBatis开发框架一

    大部分 Java 应用都是 Web 应用,展现层是 Web 应用不可忽略的重要环节.Spring 为展现层提供了一个优秀的 Web 框架—— Spring MVC.和众多其他 Web 框架一样,它基于 ...

  7. android开发，socket发送文件，read阻塞，得不到文件尾-1

    这是我的接收文件代码:开始可以读取到-1,但是现在又读取不到了,所以才加上红色字解决的(注释的代码) File file = new File(mfilePath,"chetou." ...

  8. @修饰符－－python中的装饰器

    装饰器模式可以在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责,也能够处理那些可以撤销的职责.经常用于日志记录.性能测试等场合. 想象一下这个很常见的场景,你写了一个方法只提供给以登陆的 ...

  9. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  10. Java多jdk安装

    1.安装jdk 2.配置 1.安装(略) 2.配置 2.1 regedit 注册表修改,假定已经安装jdk1.6,现在更换为jdk1.7 注: 修改红色框中CurrentVersion为jdk1.7 ...