React之ref操作DOM（ref = {input=>this.input = input}）

学习react的同学肯定看过这种写法

注意这里的ref，写法为

ref = {(input)=>{this.input=input}}
等价于
ref = {input=>this.input=input}
等价于
ref = {(input)=>this.input=input}

这里主要是ES6箭头函数arrow function和React语法的结合。

知识点1、

　　

知识点2、

　　React官方说法

1、我们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。
　　在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

2、然后我们就可以在 componentDidMount 中使用这个 DOM 元素，并且调用 this.input.focus() 的 DOM API。整体就达到了页面加载完成就自动 focus 到输入框的功能
　　（大家可以注意到我们用上了 componentDidMount 这个组件生命周期）。

3、我们可以给任意代表 HTML 元素标签加上 ref 从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 
　　本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

　　

其他：

React 中ref的几种用法
1.字符串
通过 this.refs.a 来引用真实dom的节点---dom 节点上使用
<input  type ="text" ref="a"/> 


2.回调函数
回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。
<input type="text" ref={(input)=>{this.textInput=input}} 



3.React.createRef()
在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例

class Counter extends Component {
    constructor() {
        super()
        this.state ={sum:0,number:0}
        this.myRef = React.createRef();
    }
    change = () =>{
        this.setState({...this.state,sum: Number(this.textInput.value) + Number(this.myRef.current.value)})
    }
    componentDidMount(){
        console.log(this.myRef.current.value);
    }
    render() {
        return (
            <div onChange ={this.change} >
                <input type="text" ref={(input)=>{this.textInput=input}} />+ 
                <input  type ="text" ref={this.myRef} /> = {this.state.sum}
            </div>
            
        )
    }
}

　　

.

React 中ref的几种用法1.字符串通过 this.refs.a 来引用真实dom的节点dom 节点上使用
 <input  type ="text" ref="a"/> 12.回调函数回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。
<input type="text" ref={(input)=>{this.textInput=input}} 13.React.createRef()在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例
class Counter extends Component {    constructor() {        super()        this.state ={sum:0,number:0}        this.myRef = React.createRef();    }    change = () =>{        this.setState({...this.state,sum: Number(this.textInput.value) + Number(this.myRef.current.value)})    }    componentDidMount(){        console.log(this.myRef.current.value);    }    render() {        return (            <div onChange ={this.change} >                <input type="text" ref={(input)=>{this.textInput=input}} />+                 <input  type ="text" ref={this.myRef} /> = {this.state.sum}            </div>                    )    }}————————————————版权声明：本文为CSDN博主「zhang_xin_new」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/zhang_xin_new/article/details/91458022