react中获取dom以及使用ref

一、react中获取dom有以下提供三种方法：

2react原生函数findDOMNode获取dom

3通过ref来定位一个组件，切记ref要全局唯一（类似id）

ref Callback 属性

React支持一种非常特殊的属性，你可以附加到任何的组件上。 ref 属性可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。被引用的组件会被作为参数传递，回调函数可以用立即使用这个组件，或者保存引用以后使用（或者二者皆是）。

二、转发 Refs

通过这种方式，使用 FancyButton 的组件可以获得底层 button DOM 节点的引用并在必要时访问它 - 就像他们直接使用 DOM button 一样。

以下是对上述示例中发生情况逐步的说明：

1 由于每次服务器返回的都是HTML模板，存储在前端的数据内容不能方便地持久化，因此前端状态的维护很麻烦。

2 使用LocalStorage或者Cookie来存储数据的安全性比较低，而且不灵活，比如存储的数据删除或者更改需要通过浏览器来解决。

3 基于React的服务端数据持久化方案的开发过程比较复杂，需要考虑到设计模式，路由管理，数据库以及安全等因素。

1、在react中可以给输入控件（如input type=text）加上引用名，好获取它的输入值

例如：

2、<textarea >控件，它和input不同，它是开标签，内容是包括在<textarea >和</textarea>之间的。如果需要获取<textarea >的值，同样可以用ref来获取

例如:

注意：这里log出来的是页面用户输入后的最终文字。

3、单选radio和多选checkbox，获取它们的值最好还是用一个公共变量如state来保存，因为它们的值只能在触发事件中获取，不像text控件可以后期提交时获取。初始值可以通过 defaultChecked={true} 来设置。

radio例子：

如果是checkbox，用div包住不合适，因为div每次点击只能获取点击一次的值。所以checkbox需要写到每个checkbox 控件里面的onChange或onClick事件。可以通过一个state的数组来存储变更。checkbox例子：

以上就是关于react中获取dom以及使用ref全部的内容，包括:react中获取dom以及使用ref、react数据持久化缺点、react.js 下获取各种input控件的值 radio、checkbox等等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！