react Ref

在react的组件无法达到需求时,可以使用refs来强制修改子组件

用法:

1.导入react中的createRef属性

2.给createRef定义一个状态

3.使用这个refs

//从react中导入createRef
import React, { Component, createRef } from 'react'

export default class App extends Component {
//定义一个变量来存放ref
  inputRef = createRef()
//定义点击事件
  handleClick = () => {
      () => {
//触发ref
        this.inputRef.current.focus()
      }
    )
  }

  render () {
    return (
      <div>
{/* 绑定ref */}
            <input ref={this.inputRef}></input>   
            <button onClick={this.handleClick}>聚焦</button>
        </div>
      </div>
    )
  }
}

一般refs用来

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库。