react中refs的使用

1、在dom元素中直接使用ref

意思就是可以在组件中创建一个dom节点的textInput，并将ref直接绑定到他

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  //在dom元素上使用ref
  class App extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef() （ref对象）
      this.focusTextInput = this.focusTextInput.bind(this)
    }
    focusTextInput(){
      this.textInput.current.focus()
    }
    render(){
      return (
      <div>
        <input type="button" onClick={this.focusTextInput} value="获取焦点" />
        <input type="text" ref={this.textInput} />
      </div>
      )
    }
  }
  ReactDOM.render(<App />, document.getElementById('root'));
</script>

2、为class组件添加refs 这个时候 refs指向的是子组件的实例 这样在父组件中可以调用子组件中的方法

当为了使用更方便时可以直接在子组件上定义一个refs别名 作为props传递个子组件 

在父组件中想获取子组件的哪个dom元素 就将刚刚传递个子组件的props 作为dom元素ref属性的值

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  class CustomeInput extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef()
      this.textInputFocus = this.textInputFocus.bind(this)
      
    }
    textInputFocus(){
      this.textInput.current.focus()
    }
    render(){
      return (
      <React.Fragment>
        <input readOnly type="button"  value="点击我"  />
        <input onChange={()=>{}} ref={this.textInput} value="Focus the text input"  />
      </React.Fragment>
      )
    }
  }
  
  class App extends React.Component{
    constructor(props){
      super(props)
      this.textInput = React.createRef()
    }
    componentDidMount(){
      this.textInput.current.textInputFocus()
    }
    render(){
      return (
      <div><CustomeInput  ref={this.textInput} /></div>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));
</script>

 

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { ThemeContext,themes } from './components/ThemeContext';
import ThemeButton from './components/ThemeButton'

class CustomInput extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <input onChange={()=>{}} value="fouse" ref={this.props.inputRef} />
    }
}

class App extends React.Component{
    constructor(props){
        super(props)
        this.input = React.createRef()
    }
    componentDidMount() {
        this.input.current.focus()
    }
    render(){
        return (
            <div>
                <CustomInput inputRef={this.input} />
            </div>
        )
    }
}


ReactDOM.render(<App />,document.getElementById('root'))

3、通过转发的方式将将 DOM Refs 暴露给父组件

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
//利用forwardRef 将ref转发给dom元素的button
const FancyButton = React.forwardRef((props,ref)=>(
    <button ref={ref} onClick={props.onClick}>
    {props.children}
    </button>
))

class App extends React.Component{
    constructor(props){
        super(props)
        this.ref = React.createRef()
        this.clickHandle = this.clickHandle.bind(this)
    }
    clickHandle(){
        console.log(this.ref.current)
    }
    render(){
        return (
            <FancyButton ref={this.ref} onClick={this.clickHandle}>clickME</FancyButton>
        )
    }
}
</script>

 4、回调refs

 注：内联的回调refs 会调用二次 第一次返回null

内联的写法：

<input ref={（e）=>this.inputText=el} onChange={()=>{}} value="inputfocus" />

<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"/>
<script type="text/babel">
  //回调refs
  class App extends React.Component{
    constructor(props){
      super(props)
      this.inputText=null;
      this.setInputRef = (element)=>{
        this.inputText = element;
      }
      this.focusTextInput=()=>{
        if(this.inputText) this.inputText.focus()
      }
    }
    componentDidMount(){
      this.inputText.focus()
    }
    render(){
      return (
      <div>
        <input type="button" value="点击" onClick={this.focusTextInput} />
        <input ref={this.setInputRef} onChange={()=>{}} value="inputfocus" />
      </div>
      )
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));
</script>