<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var FormComponent = React.createClass({
    getInitialState:function(){
      return {result:'123'}
    },
    handleChange:function(event){
      console.log(event.target.value);
      this.setState({result:event.target.value});
    },
    handleSubmit:function(event){
      event.preventDefault();
      console.log(this.state.result);
    },
    render:function(){
      return <form onSubmit={this.handleSubmit}>
      <input type="text"
            onChange={this.handleChange}
            value={this.state.result}/>
      <input type="submit" value='提交'/>
      </form>
    }
  })

  ReactDOM.render(
  <FormComponent/>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React 表单控件onSubmit的更多相关文章

  1. react 项目实战（四）组件化表单/表单控件 高阶组件

    高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...

  2. wicket基础应用(2)--wicket表单控件的使用

    该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...

  3. angular 响应式自定义表单控件—注册头像实例

    1. 组件继承ControlValueAccessor,ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值,获取表单的元素的元素值 regi ...

  4. js进阶 9-6 js如何通过name访问指定指定表单控件

    js进阶 9-6 js如何通过name访问指定指定表单控件 一.总结 一句话总结:form中控件的三种访问方式:2formElement 1document 1.form中控件的三种访问方式? 1.f ...

  5. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  6. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  7. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  8. 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明

    上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...

  9. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

随机推荐

  1. 通过set-context 控制namespace 进行隔离

    kubernetes RBAC  需要了解 rules  roles  subjects  rolebindings(role绑定) rules 是一组操作 verbs .资源 . api组. 如果只 ...

  2. solidity fallback函数

    什么是fallback函数: 出处:http://me.tryblockchain.org/blockchain-solidity-fallback.html 回退函数是合约里的特殊函数,没有名字,不 ...

  3. day03---基本数据类型、运算符、与用户交互

    day03 基本数据类型: 数据类型指的是变量值的类型,变量值之所以区分类型,是因为变量值是用来记录一种事物的状态,而不同的事物有不同的事物状态,对应着也必须必须用不同的变量类型去衡量. 分类: 数字 ...

  4. MIUI7 系统应用精简（米5、红米note3）

    1.由于安装的部分应用在root后无法使用,所以自己一直不能使用MIUI的开发版本. 2.前段时间米5升级MIUI8,实在是用着不咋地,耗电,王者还掉帧,于是降级miui7 3.被逼走上了刷机路. 1 ...

  5. redis 配置 架构 基础

    redis 官网  redis.io   io为某国家域名后缀 有redis各种版本. java 版本 又分各种工具 clients 下 RedisClient为图形化管理界面 Jedis 才是jav ...

  6. .NET持续集成与自动化部署之路第二篇——使用NuGet.Server搭建公司内部的Nuget(包)管理器

    使用NuGet.Server搭建公司内部的Nuget(包)管理器 前言     Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基 ...

  7. （8）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Ocelot网关（Api GateWay）

    说到现在现有微服务的几点不足: 1) 对于在微服务体系中.和 Consul 通讯的微服务来讲,使用服务名即可访问.但是对于手 机.web 端等外部访问者仍然需要和 N 多服务器交互,需要记忆他们的服务 ...

  8. c#基础系列2---深入理解 String

    "大菜":源于自己刚踏入猿途混沌时起,自我感觉不是一般的菜,因而得名"大菜",于自身共勉. 扩展阅读:深入理解值类型和引用类型 基本概念 string(严格来说 ...

  9. 用PHP山寨一款软件

    什么是我国软件工程师引以为豪的能力?山寨.山寨,山寨! 我国程序员的山寨能力是世界一流的.这一点在世界范围内令人闻风丧胆.世界上根本就找不到一款我国工程师不能山寨的软件. 今天,锋哥教大家来山寨一款软 ...

  10. 2-Twenty Fourth Scrum Meeting-20151230

    前言 因为服务器关闭,我们的开发项目也遭遇停滞一个星期.与网站开发负责人员协商之后,29号开放服务器.我们的项目也能够继续下去.比规定的开发时间(截止为2015/12/29)推迟. 事项安排 1.开发 ...