React三大属性之Refs的使用详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

类组件

在类中，refs有三种方式，目前最常用的是回调的形式使用,分别进行演示

//直接定义refs,已废弃
class App extends React.PureComponent{
    changeInput = ()=>{
        const {input} = this.refs
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
            </div>
        )
    }
}

//用回调的形式使用
class App extends React.PureComponent{
    changeInput = ()=>{
        console.log(this.inputRef);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
            </div>
        )
    }
}

//用createRef
class App extends React.PureComponent{
    inputRef = React.createRef()
    changeInput = ()=>{
        console.log(this.inputRef.current);
    }
    render() {
        return (
            <div>
                <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
            </div>
        )
    }
}

以上就是类组件的三种Ref的写法

函数组件

function App(){
    const inputRef = useRef("")
    return (
        <div>
            <input type="text" placeholder={"please input your value"} ref={inputRef}/>
        </div>
    )
}

用一个useRef直接就完成了代码

面试常问：React中的refs作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。而函数组件中,react用hooks的api useRef也能获得ref(在hooks中也常常用useRef的特性即不随着组件刷新而刷新存储的数据从而写一些不变的量)

以上就是React三大属性之Refs的使用详解的详细内容，更多关于React三大属性之Refs的资料请关注极客世界其它相关文章！