react之ref的使用

react中如果我们想操作dom，可以使用createRef去实现

1. ref的基本使用

以下例子为在组件一挂载完毕后input就获取焦点，通过 "current" 来访问 DOM 节点

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

 class Child extends Component {
    constructor(props){
        super(props);
        this.state={
          name:'张三'
        }
      }
    render() {
      return (
        <div>
          <h1>Child组件</h1>
        </div>
      )
    }
}

export default class App extends Component {
  constructor(props){
    super(props);
    this.input = createRef()
    this.child = createRef()
  }
  componentDidMount(){
    console.log('input',this.input.current); //获取到dom元素
    console.log('child',this.child.current.state.name); //获取到组件实例
    this.input.current.focus()
  }
  changeText = (event)=>{
      this.h1.current.innerHTML = event.target.value
   }
  render() {
    return (
      <div>
        <h1>App...</h1>
        <input ref={this.input} onChange={this.changeText} />
        <Child ref={this.child} />
      </div>
    )
  }
}