<!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. 如何使用bootstrap框架

    Bootstrap是前端工程师比较常用的框架.插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...

  2. 马哥Python视频

    链接:https://pan.baidu.com/s/1KMXqdXlaIjZ3OaZ-PUwE9A 密码私聊我

  3. Appium——处理混合APP中H5的操作

    https://blog.csdn.net/iiyting/article/details/51887488

  4. centos7安装python3和pip3

    python3安装 1.安装准备 # 创建安装目录 mkdir /usr/local/python3 #下载python3 wget --no-check-certificate https://ww ...

  5. MATLAB 图形着色

    1.matlab中的颜色查找表函数: (1)autumn:从红色向橘黄色.黄色平稳过渡: (2)bone:为含有较高的蓝色组分的gray颜色查找表: (3)colorcube:包含RGB颜色空间中尽可 ...

  6. WannaCry勒索软件还在继续传播和感染中

    导读 WannaCry的大规模感染受益于影子经纪人泄露的永恒蓝色漏洞,尽管微软发布了安全更新,但许多用户还没有安装它.自最初爆发以来已经过去了18个月,但到目前为止仍有数十万用户感染了WannaCry ...

  7. Luogu P1129 [ZJOI2007]矩阵游戏

    题目意思还是比较直观的,而且这个建模的套路也很明显. 我们首先考虑从主对角线可以转移到哪些状态. 由于每一次操作都不会把同一行(列)的黑色方块分开.因此我们发现: 只要找出\(n\)个黑色棋子,让它们 ...

  8. java 基础02 打包package

  9. Ubuntu 打包后安装提示：子进程 已安装 pre-removal 脚本 返回了错误号 1

    子进程 已安装 pre-removal 脚本 返回了错误号 1或2 与 子进程 已安装 post-installation 脚本 返回了错误号 1或2   一.子进程 已安装 pre-removal  ...

  10. kvm虚拟化管理平台WebVirtMgr部署-完整记录(2)

    继上一篇kvm虚拟化管理平台WebVirtMgr部署-完整记录(1),接下来说说WebVirtMgr的日常配置:添加宿主机,创建虚机,磁盘扩容,快照等具体操作记录如下: 一.配置宿主机1.登录WebV ...