React 三种获取ref方式

获取ref三种方法

1、字符串形式的ref

 class Box extends React.Component{
        render(){
            return <input ref='input' type="text"/>
        }
    }

2、回调形式的ref

   class Box extends React.Component{
        clic(){
            console.log(this.input.value)
        }
        render(){
            return <input onBlur={this.clic.bind(this)} ref={currentNode=>this.input=currentNode} type="text"/>
        }
    }
   #DOM 会自动传入函数内部
   ReactDOM.render(<Box/>,document.getElementById('root'))

3、createRef形式

    class Box extends React.Component{
        constructor(){
            super()
            this.currentNode=React.createRef()
        }
        clic(){
            console.log(this.currentNode.current.value)
        }
        render(){
            return <input onBlur={this.clic.bind(this)} ref={this.currentNode} type="text"/>
        }
    }
    ReactDOM.render(<Box/>,document.getElementById('root'))