React refs 进阶篇一回调形式的refs

最新推荐文章于 2024-01-23 10:57:57 发布

原创最新推荐文章于 2024-01-23 10:57:57 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了React中回调形式的refs使用，包括内联函数形式和类绑定形式。内联函数形式在更新数据时会导致两次调用，而类绑定形式则将回调函数放在实例方法中，避免了该问题。通过这两种方式，开发者可以更灵活地获取和操作DOM元素。

React refs 进阶篇一回调形式的refs

注：回调形式的refs 分为两种

   一、内联函数形式应用

        class Demo extends React.Component{
            render(){
                return (
                    <div>
                        回调形式refs内联函数形式  
                        注：内联函数形式 更新数据时会触发两次，第一次调用返回为null  第二次返回当前节点
                        <input ref={ C => this.input = C} type="text"/> 
                        <button onClick={this.showData}>点击</button>    
                    </div>
                )
            }

            // 显示左侧input内容
            showData = ()=>{
                const {input} = this
                alert(input.value)
            }
        }

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

二、将回调函数改为class绑定形式

        class Demo extends React.Component{
            render(){
                return (
                    <div>
						回调形式refs类绑定式，放在了实例自身，需要在实例自身写回调函数
						<input ref={this.saveInput} type="text"/> 
						<button onClick={this.showData}>点击</button>    
                    </div>
                )
            }
            
            // 显示左侧input内容
            showData = ()=>{
                const {input} = this
                alert(input.value)
            }
	
			// input输入框refs回调函数类绑定 方法
			saveInput = (c) =>{
				this.input = c
			}
        }
        ReactDOM.render(<Demo/>,document.getElementById('test'))