3.使用ref的三种方式

2023-06-20 21:55| 来源: 网络整理| 查看: 265

（1）字符串的方式

import React, { Component } from 'react' export default class Father extends Component { componentDidMount(){ console.log(this.refs.refElement); } render() { return ( 123 ) } }

（2）函数的方式

import React, { Component } from 'react' export default class Father extends Component { componentDidMount(){ console.log(this.refElement); } render() { return ( this.refElement = ref }> 123 ) } }

（3）react.CreateRef的方式

import React, { Component } from 'react' export default class Father extends Component { refElement = React.createRef(); componentDidMount(){ console.log(this.refElement.current); } render() { return ( 123 ) } } ref的使用场景

这里我们说一个比较常见的场景，就是点击按钮让输入框聚焦：

通过获取DOM后，调用DOM上的focus方法API，来让input框进行聚焦。

同时ref也可以适用于一些DOM元素的动画效果，例如移动，变大变小，都需要通过ref来控制DOM，进行操作。

【本文地址】

公司简介

联系我们