使用场景

• 父组件操作子组件input标签时的简单方法
• forwordRef 只能是一个input不适合多个

forwordRef 方法

import React, { Component } from 'react'
import { forwardRef } from 'react'

export default class App extends Component {
  myref = React.createRef()
  render() {
    return (
      <div>
        <Child ref={this.myref}></Child>
        <button onClick={() => {
          console.log(this.myref, this.myref.current.value)
          this.myref.current.value = ''
          this.myref.current.focus()
        }}>click</button>
      </div>
    )
  }
}

const Child = forwardRef( (props, ref) => {
  return(
    <>
      <input ref={ref} defaultValue='kkk'/>
    </>
  )
})

传统方法

import React, { Component } from 'react'

export default class App extends Component {
  myref = null
  render() {
    return (
      <div>
        <Child callback= {(myref) => {
          this.myref = myref
        }}></Child>
        <button onClick={() => {
          console.log(this.myref, this.myref.current.value)
          this.myref.current.value = ''
          this.myref.current.focus()
        }}>click</button>
      </div>
    )
  }
}

class Child extends Component {
  myref = React.createRef()
  componentDidMount() {
    this.props.callback(this.myref)
  }
  render() {
    return <>
      <input defaultValue={'hhhh'} ref={this.myref} />
    </>
  }
}