React 学习笔记 —— refs 属性

原创

叹之 2021-07-09 10:46:33 ©著作权

©著作权归作者所有：来自51CTO博客作者叹之的原创作品，请联系作者获取转载授权，否则将追究法律责任

字符串 ref

注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除

class Demo extends React.Component {
    handleChange = () => {
    	// 可以通过 refs 访问到被引用的标签
        this.refs.p.innerText = this.refs.input.value
    }
    render () {
        return (
            <div>
            	// 通过 ref 对标签进行引用
                <input ref="input" type="text" onChange={this.handleChange}/>
                <p ref="p"></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

回调 ref

传入内联回调，在更新时，该内联回调会调用两次
第一次，接收到的参数为 null，是为了清空状态
第二次，接收到的参数为绑定的标签

class Demo extends React.Component {
    handleChange = () => {
    	// 在组件实例上访问
        this.p.innerText = this.input.value
    }
    render () {
        return (
            <div>
            	// 传入一个回调函数，该函数被调用时第一个参数为所在标签
            	// 可以在回调函数体内，将所在标签挂在组件实例上
                <input ref={c => this.input = c} type="text" onChange={this.handleChange}/>
                <p ref={c => this.p = c}></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

传入非内联函数，在更新时，不会重复调用

class Demo extends React.Component {
    handleChange = () => {
    	// 在组件实例上访问
        this.p.innerText = this.input.value
    }
    bindInput = (c) => {
    	this.input = c
    }
    bindP = (c) => {
		this.p = c
	}
    render () {
        return (
            <div>
            	// 传入一个回调函数，该函数被调用时第一个参数为所在标签
            	// 可以在回调函数体内，将所在标签挂在组件实例上
                <input ref={this.bindInput} type="text" onChange={this.handleChange}/>
                <p ref={this.bindP}></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

createRef

被 React 推荐使用的形式

class Demo extends React.Component {
	// 使用 createRef 创建一个标签节点容器
    inputRef = React.createRef()
    pRef = React.createRef()
    handleChange = () => {
        this.pRef.current.innerText = this.inputRef.current.value
    }
    render () {
        return (
            <div>
            	{/* 在标签节点上通过 ref 属性 传入容器，则该容器会自动包含该节点 */}
                <input ref={this.inputRef} type="text" onChange={this.handleChange}/>
                <p ref={this.pRef}></p>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))