前言 在React中,只要props或state发生改变,则render()方法必定执行,即DOM会更新。然React更新DOM时,可能会导致已经获取焦点的元素失去焦点,故此时需要操作DOM,获取焦点。
React.createRef() 使用React.createRef()方法可以创建一个存储dom的ref,当ref设置在组件上时,即可存储该元素的dom引用。
// index.js
import React from 'react'
import CustomTextInput from './CustomTextInput'
class Parent extends React.Component {
constructor(props) {
super(props);
// 创建一个ref存储dom元素
this.inputElement = React.createRef();
this.getFocus = this.getFocus.bind(this)
}
getFocus() {
this.inputElement.current.focus()
}
render() {
return (
<CustomTextInput
inputRef={this.inputElement}
inputGetFocus={this.getFocus}
/>
)
}
}
export default Parent
// CustomTextInput.js
import React from 'react'
const CustomTextInput = (props) => {
return (
<React.Fragment>
<input
type="text"
ref={props.inputRef}
/>
<button onClick={props.inputGetFocus}>获取焦点</button>
</React.Fragment>
)
}
export default CustomTextInput
// index.js
import React from 'react'
import CustomTextInput from './CustomTextInput'
class Parent extends React.Component {
constructor(props) {
super(props);
this.getInputElement = this.getInputElement.bind(this)
this.getFocus = this.getFocus.bind(this)
}
getFocus() {
this.inputElement.focus()
}
getInputElement(el) {
this.inputElement = el
}
render() {
return (
<CustomTextInput
inputRef={this.getInputElement}
inputGetFocus={this.getFocus}
/>
)
}
}
export default Parent
<div className="ViewportDownloadForm" >
<div
style={{
height: viewportElementDimensions.height,
width: viewportElementDimensions.width,
position: 'absolute',
left: '9999px',
}}
ref={ref => setViewportElement(ref)}
>