最近的项目中开发中都是用react,其中有用到react去操纵表单。然后自己就在每个表单元素中添加 ref,  然后再像jquery操作dom一样去操纵这个ref,

代码如下:

首先我在每个表单元素那里都加了ref

然后再像操作dom一样操作表单

整个过程看起来即累赘,又感觉很怪。这样你还不如直接用jqurey来操作dom.

  在这里,想补充一下 react 中的ref到底为何物

ref 属性可以是一个回调函数,而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递,且回调函数可以立即使用这个组件,或保存供以后使用(或实现这两种行为)。

它与把 ref 属性分配给从 render 返回来的东西一样简单.

完成的示例

var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleChange: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
// Clear the input
this.setState({userInput: ''}, function() {
// This code executes after the component is re-rendered
React.findDOMNode(this.refs.theInput).focus(); // Boom! Focused!
});
},
render: function() {
return (
<div>
<div onClick={this.clearAndFocusInput}>
Click to Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange}
/>
</div>
);
}
});

在这个例子中,render 函数返回 <input/ > 实例的描述。但真正的实例是通过 this.refs.theInput 访问的。只要带有 ref =“theInput” 的子组件从 render 返回,this.refs.theInput 就会访问适当的实例。这甚至能在更高的级别(non-DOM)组件中实现,如 <Typeahead ref = " myTypeahead " / >

总结

向一个特定的子实例发送消息,Refs 是一个很好的方式,而通过流动式接收 Reactive 的 props 和 state 的方式可能是不方便的。然而,对于你的应用程序中的流动数据来说,refs 应该不是你的首选抽象特性。默认情况下,为用例使用 Reactive 数据流并保存 refs 本来就是无功无过的。

好处:

  • 你可以在组件类中定义任何公共方法(如在 Typeahead 中的复位方法),并通过 refs(如this.refs.myTypeahead.reset())调用这些公共方法。
  • 执行 DOM 测量几乎总是需要接触“本地”组件,如 <input/ >,并通过 React.findDOMNode(this.refs.myInput)访问它的底层 DOM 节点。Refs 是可行的可靠的方法之一。
  • refs 自动为你 book-kept!如果子组件被摧毁,那么它的 ref 也被摧毁了。在这里不必担心内存(除非你为保留自己的 reference 做了一些疯狂的事)。

注意事项:

  • 永远不要访问组件的 render 方法内部的 refs——或任何组件的 render 方法正在 call satck 中运行时,也不要访问 refs。
  • 如果你想保存 Google Closure Compiler Crushing 的弹性,确保永远不要访问作为字符串被指定的属性。这意味着如果你的 ref 被定义为 ref =“myRefString”,你必须使用 this.refs['myRefString'] 来访问。
  • 如果你还没有用 React 给几个应用程序编程,那么你通常首先会倾向于尝试使用 refs 来“让事情发生”在你的应用程序中。如果是这样的话,花点时间,更为慎重的思考一下 state 应该属于组件层次结构的什么位置。通常情况下,你会清楚地发现,“拥有”那个 state 的适当的位置是更高的层次结构中。把 state 放置在那里通常可以消除任何想要使用 ref 来“让事情发生”的现象——相反,数据流通常会实现你的目标。

上面的介绍参考:http://wiki.jikexueyuan.com/project/react/more-about-refs.html

  看的不是很懂。不过总结出,如果我像我上面那样去操作一大丢的表单的话,会影响数据流的执行

所以我将我的代码改为如下:

首先,在初始状态,设置表单的值

然后,将表单的ref值去掉,而是动态的来给它赋值

再之后, 给每个表单添加这些时间,让它输入框每次变化的时候,都更新表单value对应的state。下面是每个表单对应的事件

最后,将这些事件添加到表单的onChange中

通过这样的修改,每次我的输入框发生变化时,表单value对应的state就会更新,从而达到操纵表单的效果。

结合着ajax的话,我们只需要获取每个表单的当前的state就行。比如,我要获取price这个元素的值,我只需要var priceValue=this.state.price既可。

而不需要去操作一系列的dom。因为是处于演示,所以每个表单的函数我就没有去封装了。共用一套看起来会好看点

如果有更好的办法,望多多指教!

【原】React操作表单的更多相关文章

  1. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  2. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  3. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  4. UIAlertController警告视图和操作表单

    //创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...

  5. JQuery:各种操作表单元素方法小结

    来源:http://www.ido321.com/1220.html 表单元素无处不在,已然成了Web应用不可或缺的一个部分.对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值.那在JQu ...

  6. JQuery中操作表单和表格

    一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  7. (转载)使用JavaScript操作表单

    (转载)http://www.blogjava.net/junglesong/archive/2008/03/02/183263.html 使用JavaScript操作表单 获取表单的引用 在开始对表 ...

  8. React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践

    关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...

  9. jQuery使用(三):DOM操作之val()方法操作表单元素value值

    操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...

随机推荐

  1. MVC认知路【点点滴滴支离破碎】【五】----form表单上传单个文件

    //个人理解:前台一个form加input[type='file'],在加一个submit的按钮 主要设置form的action,method,enctype='multipart/form-data ...

  2. 59-chown 简明笔记

    改变文件的所有者或与文件相关联的组 chown [options] owner file-list chown [options] owner: group file-list chown [opti ...

  3. 12-rm 命令总结

    rm remove files or directories 删除目录或文件 [语法]: rm [选项] [参数] [功能介绍] rm命令可以删除一个目录中的一个或多个文件或目录,也可以将某个目录及其 ...

  4. C++类功能扩展预留五招

    第一招虚函数 通过派生类来进行功能扩展是基本的面向对象的方式,这种方式大如下: class base { public: virtual ~base(){} virtual void fun() { ...

  5. Tomcat遇到的问题

    1. java.lang.OutOfMemoryError: PermGen space 启动tomcat服务时,报这个错,查了下是,内存泄露 PermGen space的全称是Permanent G ...

  6. c#模拟表单POST数据,并获取跳转之后的页面

    直接看代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  7. git flow的使用

    简介 Gitflow工作流程围绕项目发布定义了严格的分支模型.尽管它比Feature Branch Workflow更复杂一些,但它也为管理更大规模的项目提供了坚实的框架. 与Feature Bran ...

  8. 18 BufferedReader使用方法

    生成BufferedReader对象的方法: BufferedReader in=new BufferedReader(new FileReader("foo.in")); imp ...

  9. 【POJ 1698】Alice's Chance(二分图多重匹配)

    http://poj.org/problem?id=1698 电影和日子匹配,电影可以匹配多个日子. 最多有maxw*7个日子. 二分图多重匹配完,检查一下是否每个电影都匹配了要求的日子那么多. #i ...

  10. PL/SQL Developer连接本地64位Oracle数据库

    1.安装oracle Clinet 首先到Oracle官网上去下载一个Oracle 11g Client(我的是11g的oracle),不过需要先申请一个Oracle 帐号,才能下载. 目前下载地址: ...