裁判是反应中的一种属性,当呈现函数返回某个组件的实例时,可以给渲染中的某个虚拟DOM节点添加一个裁判属性,如下面的代码所示:
& lt; body>
& lt;脚本类型=拔谋?jsx”比;
应用var=React.createClass ({
呈现:函数(){
回报(
& lt; div>
& lt;输入类型=拔谋尽闭嘉环?笆淙氲亩鳌眗ef="输入"/比;
& lt;/div>
）;
}
});
React.render (
& lt; App/祝辞,
document.body
）;
& lt;/script>
& lt;/body>
之前
在上面的代码中,呈现函数里仅仅返回了一个& lt; div>标签,& lt; div>里仅有一个& lt; input>标签,在& lt; input>标签的属性中,添加了一个裁判属性,官方文档上对于裁判属性的解释如下:
<强> ref属性
反应支持一种非常特殊的属性,你可以用来绑定到渲染()输出的任何组件上去。这个特殊的属性允许你引用渲染()返回的相应的支撑实例(实例)的支持。这样就可以确保在任何时间总是拿到正确的实例。
给& lt; input>标签设置ref属性有什么用途呢?下面是官方文档给出的解释:
在其它代码中(典型地事件处理代码),通过这个。裁判获取支撑实例(支持实例),就像这样:this.refs.input。其中就“输入”是上面给& lt; input>标签设置的ref属性的值。
通过ref属性,我们还可以拿到该虚拟DOM对应的真实DOM节点,有两种方法可以拿到真实DOM节点,如下代码所示:
& lt;输入类型=拔谋尽眗ef="用户名"/比;//下面4种方式都可以通过裁判获取真实DOM节点
var usernameDOM=this.refs.username.getDOMNode ();
var usernameDOM=React.findDOMNode (this.refs.username);
var usernameDOM=this.refs(“用户名”).getDOMNode ();
var usernameDOM=React.findDOMNode (this.refs['用户名']);
之前
下面通过一个演示来了解ref的使用:
演示在浏览器中运行的效果如下图:
在最上面的输入框中输入任意1 - 10的数字,即可让下面10个输入框中对应的输入框获取焦点,如上图,输入3后,下面第3个输入框马上获取焦点,这里就用到了ref属性,代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Refs
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/react-0.13.0/build/react.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/react-0.13.0/build/JSXTransformer.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;脚本类型=拔谋?jsx”比;
应用var=React.createClass ({
handleChange:函数(事件){
var指数=event.target.value;
如果(指数在=1,,指数& lt;=10) {//找到对应的输入框并将焦点设置到里面
var refName=笆淙搿?指数;//var inputDOM=React.findDOMNode (this.refs [refName]);
var inputDOM=this.refs [refName] .getDOMNode ();
inputDOM.focus ();
}
}，
呈现:函数(){
var输入=[];
(var i=1;我& lt;=10;我+ +){
inputs.push (& lt; div> & lt; li> & lt;输入类型=拔谋尽眗ef={“输入”+ i}/祝辞& lt;/li> & lt; br/祝辞& lt;/div>);
}
回报(
& lt; div>
& lt;标签htmlFor="输入"的在在这里输入下面任意输入框的索引,光标会自动定位到输入框内:& lt;/label>
& lt;输入类型="文本" id="输入" onChange={。handleChange}/比;
& lt;人力资源/比;
& lt; ol>
{输入}
& lt;/ol>
& lt;/div>
）
}
});
React.render (
& lt; App/祝辞,
document.body
）;
& lt;/script>
& lt;/body>
& lt;/html>之前
在渲染函数中,为html文档的身体部分添加了10个输入框,每个输入框的ref属性都设置成了(“指数”+索引]的这种方式,然后在最上面的输入框的handleChange函数中,获取输入的数字,并得到裁判属性的值,最后根据ref属性的值,找到对应的真实DOM节点,然后让该DOM节点获取焦点。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
