React获得真实的DOM操作

真实的DOM操作

React获得真实的DOM操作

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,

我们来看一组案例

  在代码中我们定义了一个组件 MyComponent   组件名字首字母必须大写 , handleClick()是点击事件,其中的ref

是用来绑定render()输出的任何组件上。

组件  的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

React 除了 Click 事件以外,还有 KeyDown 、CopyScroll 等,完整的事件清单请查看官方文档

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<h1>获取真实DOM</h1>
<textarea style="width: 700px;height:500px;">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value
var example=document.getElementById('example');
var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value;
example.appendChild(test)
},
render: function() {
return (
<div>{/*HTML中的注释需要加花括号才可以*/}
<input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}
<input type="button" value="点击获得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</textarea>
<h3>演示:</h3>
<div id="example"></div>
<div id="test"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value; },
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}
<input type="button" value="点击获得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>

  

上一篇:selenium python 启动Chrome


下一篇:IOS UI-Button按钮