ref 是 React 中的一种属性, 当 render 函数返回某个组件的实例时, 可以给 render 中的某个虚拟 DOM 节点添加一个 ref 属性, 如下面的代码所示:
- <body>
- <script type="text/jsx">
- var App = React.createClass({
- render: function() {
- return (
- <div>
- <input type="text" placeholder="input something..." ref="input" />
- </div>
- );
- }
- });
- React.render(
- <App />,
- document.body
- );
- </script>
- </body>
在上面的代码中, render 函数里仅仅返回了一个 < div > 标签,<div > 里仅有一个 < input > 标签, 在 < input > 标签的属性中, 添加了一个 ref 属性, 官方文档上对于 ref 属性的解释如下:
ref 属性
React 支持一种非常特殊的属性, 你可以用来绑定到 render() 输出的任何组件上去这个特殊的属性允许你引用 render() 返回的相应的支撑实例 ( backing instance ) 这样就可以确保在任何时间总是拿到正确的实例
给 < input > 标签设置 ref 属性有什么用途呢? 下面是官方文档给出的解释:
在其它代码中(典型地事件处理代码), 通过 this.refs 获取支撑实例( backing instance ), 就像这样: this.refs.input 其中 "input" 就是上面给 < input > 标签设置的 ref 属性的值
通过 ref 属性, 我们还可以拿到该虚拟 DOM 对应的真实 DOM 节点, 有两种方法可以拿到真实 DOM 节点, 如下代码所示:
- <input type="text" ref="username" />
- // 下面 4 种方式都可以通过 ref 获取真实 DOM 节点
- var usernameDOM = this.refs.username.getDOMNode();
- var usernameDOM = React.findDOMNode(this.refs.username);
- var usernameDOM = this.refs['username'].getDOMNode();
- var usernameDOM = React.findDOMNode(this.refs['username']);
下面通过一个 demo 来了解 ref 的使用:
demo 在浏览器中运行的效果如下图:
在最上面的输入框中输入任意 1-10 的数字, 即可让下面 10 个输入框中对应的输入框获取焦点, 如上图, 输入 3 后, 下面第 3 个输入框马上获取焦点, 这里就用到了 ref 属性, 代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Refs</title>
- <script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
- <script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
- </head>
- <body>
- <script type="text/jsx">
- var App = React.createClass({
- handleChange: function(event) {
- var index = event.target.value;
- if(index >= 1 && index <= 10) {
- // 找到对应的输入框并将焦点设置到里面
- var refName = "input" + index;
- //var inputDOM = React.findDOMNode(this.refs[refName]);
- var inputDOM = this.refs[refName].getDOMNode();
- inputDOM.focus();
- }
- },
- render: function() {
- var inputs = [];
- for(var i = 1; i <= 10; i++) {
- inputs.push(<div><li><input type="text" ref={"input" + i}/></li><br/></div>);
- }
- return (
- <div>
- <label htmlFor="input" >在这里输入下面任意输入框的索引, 光标会自动定位到输入框内:</label>
- <input type="text" id="input" onChange={this.handleChange} />
- <hr />
- <ol>
- {inputs}
- </ol>
- </div>
- )
- }
- });
- React.render(
- <App />,
- document.body
- );
- </script>
- </body>
- </html>
在 render 函数中, 为 html 文档的 body 部分添加了 10 个输入框, 每个输入框的 ref 属性都设置成了 ["index" + 索引] 的这种方式, 然后在最上面的输入框的 handleChange 函数中, 获取输入的数字, 并得到 ref 属性的值, 最后根据 ref 属性的值, 找到对应的真实 DOM 节点, 然后让该 DOM 节点获取焦点
来源: http://www.jb51.net/article/135081.htm