react 中ref 属性的三种写法

目录

1. 字符串 ref

2.dom节点上使用回调函数ref

3.React.createRef()

---

1. 字符串 ref

最早的ref用法。（由于效率问题，现在官方不推荐使用这种写法。）

1.dom节点上使用，通过this.refs.xxxx来引用真实的dom节点

 <input ref="input1" type="text"/>

代码示例：

class test extends React.Component{
    constructor(props) {
        super(props);
    }
    showData = ()=>{
        const x = this.refs
        alert(x.value)
    }
    render() {
        return (
            <div>
                <input ref="input1" type="text"/>
                <button onClick={this.showData}> 点我</button>
            </div>
        )
    }
}

2.dom节点上使用回调函数ref

<input ref={(currentNode) => {this.textInput = currentNode;}} type="text" />

简写：
<input ref={currentNode => this.textInput = currentNode } type="text" />

其中的currentNode节点是，下图：

代码示例：

class test extends React.Component{
    constructor(props) {
        super(props);
    }
    showData = ()=>{
        const {input1} = this
        alert(input1.value)
    }
    saveInput =(currentNode)=>{
        this.input1 = currentNode
    }
    render() {
        return (
            <div>
                <input ref={(currentNode)=>{this.input1 = currentNode}} type="text"/>
                //简写
                <input ref={currentNode => this.input1 = currentNode} type="text"/>
                <input ref={this.saveInput} type="text"/>
                <button onClick={this.showData}> 点我</button>
            </div>
        )
    }
}

3.React.createRef()

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

myRef = React.createRef()

 代码示例：

class test extends React.Component{
    //React.createRef调用后可以返回一个容器，该容器可以存储被ref 所标识的节点
    myRef = React.createRef()
    constructor(props) {
        super(props);
    }
    showData = ()=>{
        alert(this.myRef.current.value)
    }
    saveInput =(currentNode)=>{
        this.input1 = currentNode
    }
    render() {
        return (
            <div>
                <input ref={this.myRef} type="text"/>
                {/*<input ref={(currentNode)=>{this.input1 = currentNode}} type="text"/>*/}
                {/*//简写*/}
                {/*<input ref={currentNode => this.input1 = currentNode} type="text"/>*/}
                {/*<input ref={this.saveInput} type="text"/>*/}
                <button onClick={this.showData}> 点我</button>
            </div>
        )
    }
}

---

 

拓展：如何获取多个input输入框中的值？

第一种：

import React,{ Component } from 'react';
class ReplenishData extends Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    showVal(name,e){
        this.setState({
            [name]:e.target.value
        });
    }
    render(){
        console.log(this.state);
        return(
            <div>
                <input type="text" onChange= {this.showVal.bind(this,"name1")} />
                <input type="text" onChange={this.showVal.bind(this,"name2")} />
                <input type="text" onChange={this.showVal.bind(this,"name3")} />
                <input type="text" onChange={this.showVal.bind(this,"name4")} />
                <input type="text" onChange={this.showVal.bind(this,"name5")} />
                <input type="text" onChange={this.showVal.bind(this,"name6")} />
            </div>
        )
    }
}