<!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. Codeforces Round #553 (Div. 2) D. Stas and the Queue at the Buffet 贪心+公式转化

    题意 给出n个pair (a,b) 把它放在线性序列上 1--n 上 使得  sum(a*(j-1)+b*(n-j))  最小 思路 :对式子进行合并 同类项 有:    j*(a-b)+  (-a+ ...

  2. linux如何查看端口被哪个进程占用

    1.lsof -i:端口号 2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况 工具/原料   linux,windows xshell 方法/步骤     [ ...

  3. Objective-C 锁

    多线程在Objective-C项目中占有很大的比重,它能提高程序的运行效率,但也因此带来线程安全问题.而锁就是解决线程安全问题最常用的武器. 锁有很多种. 1.NSLock,非递归锁 NSLock * ...

  4. 盖茨基金会：如何使用Python拯救生命

    每年全球都要花费数十亿美元来预防疾病,减少死亡,资助预防保健及治疗的各种研发项目,以及其他的健康方案.但资金毕竟是有限的,所以一些组织,比如全球卫生资金的主要捐助者比尔&梅林达·盖茨基金会(B ...

  5. 移动电力猫HG260GT pon实现路由拨号

    帐号CMCCAdmin密码aDm8H%MdA 需要将原来上网的路由模式改成如下图中的桥接模式 实际应该就是将上网vlan连接到了1号口,这样路由就可以通过一号口接入拨号了 修改后再通过无线接入路由就不 ...

  6. Spring Boot 之属性读写详解

    SpringBoot 之属性读写详解 加载 property 顺序 随机属性 命令行属性 Application 属性文件 Profile 特定属性 属性中的占位符 YAML 属性 访问属性 多 pr ...

  7. (原创)odoo解决方案---接收以及回复外部邮件

    关于我的那篇"odoo邮件配置那些事儿"中提到的用户接收外部与业务无关邮件的问题,现已形成解决方案,有需要的朋友可以给发email,价格好商量,呵呵 直接贴图了 1.用户绑定 图1 ...

  8. .net core 中使用httpclient,HttpClientFactory的问题

    Microsoft 在.Net Framework 4.5中引入了HttpClient,并且是在.NET服务器端代码中使用Web API的最常用方法.但它有一些严重的问题,如释放HttpClient对 ...

  9. 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上

    写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...

  10. Python零基础入门（安装步骤，验证方式， 简单操作）

    本篇文章适合新人小白初步了解Python,涵盖Python的介绍.安装以及简单的基础操作.  1.Python简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.它的设 ...