亲宝软件园·资讯

展开

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

xiaoznz 人气:0
想了解React三大属性之Refs的使用详解的相关内容吗,xiaoznz在本文为您仔细讲解React三大属性之Refs的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React,三大属性,React,Refs,下面大家一起来学习吧。

refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法。在React官方的解释中,它的适用范围如下:

React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法

类组件

在类中,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>
        )
    }
}

加载全部内容

相关教程
猜你喜欢
用户评论