<span className="search2-icon" ref="searchIcon"></span>
<input className="search2-input"
ref="searchInput"
type="text"
onFocus={this.handleFocus.bind(this)}
onBlur={this.handleBlur.bind(this)}/>
注意要使用原生js的DOM操作：
handleFocus()｛
ReactDOM.findDOMNode(this.refs.searchIcon).setAttribute("style","display:none");
}
handleBlur() {
if(ReactDOM.findDOMNode(this.refs.searchInput).value == "")
ReactDOM.findDOMNode(this.refs.searchIcon).setAttribute("style","display:block");
}
最近在学习React的过程中遇到了一个问题，React怎么操作真实的DOM？ 我们知道，React组件操作的DOM...
注意要使用原生js的DOM操作：
标准的dom机制如下： 标准dom机制下，用户在对应用操作的时候是直接对真实的dom进行操作。在react中，用户...
React 的更新流程 React 的渲染流程是: JSX → 虚拟 DOM → 真实 DOM React 的更新...
1. 为什么用？ react渲染和操作真实DOM开销非常大，有时候我们操作某个数据的变化，就会引起整个DOM层的重...
一、react操作页面元素的途径 react使用数据绑定操作dom，如果绑定的数据多了，那么dom元素就多了；删除...
原文链接：react基础入门：(二)原生JS操作DOM元素 一 初始化项目 二 操作 DOM 获取 dom 元素 ...
1.react特点 虚拟DOM,react非常快速因为它从不直接操作DOM。render()方法实际上是对DOM描...
网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？ 作者：尤雨溪链接：https://www...
一、用途 ref属性允许我们使用react操作真实DOM 二、用法 ref属性的值是一个箭头函数，参数接收真实的D...
本文标题：React操作真实DOM
本文链接：https://www.haomeiwen.com/subject/lnqsettx.html
网友评论