前言

在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

最后

以上就是欣喜猫咪为你收集整理的react学习笔记（三）获取焦点的2种方式前言方式一：方式二：的全部内容，希望文章能够帮你解决react学习笔记（三）获取焦点的2种方式前言方式一：方式二：所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。