react三种定义ref的方式

本文介绍了在React中如何通过ref属性获取DOM节点,包括直接定义字符串引用、使用回调函数以及创建Ref对象的详细方法,帮助开发者更好地操作组件内部的节点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在react中要想获取节点,得借助ref来实现,
第一种直接定义字符串

	<input
	type="text"
	placeholder="失去焦点提示数据"
	ref="input2"
	onBlur={this.demo1}
	/>				
	//然后在实例上的refs里面调用
		demo1 = () => {//操作节点
					console.log(this.refs.input2.value)
				}		

第二种使用回调函数

  <input
	type="text"
	onKeyDown={this.demo}
	ref={currentNode => {// 使用回调函数,在实例上让input为该节点
	this.input = currentNode//注意当页面更新的适合该回调函数执行两次                                
	}}    />
	
							

第三种定义容器来接收节点

 myRef = React.createRef()//该容器只接受一个节点,返回一个对象
 <h1 ref={this.myRef}>Hello World</h1>
<think>我们正在讨论Reactref的使用,特别是通过函数(回调函数)的方式使用ref。根据提供的引用,特别是引用[2]和引用[5]中提到了回调Ref的用法。在React中,ref可以是一个回调函数,这个函数会在组件挂载或卸载时执行。当ref是一个回调函数时,它会在组件挂载时被调用,并传入DOM元素或组件实例作为参数;在卸载时调用并传入null。这样我们就可以在回调函数中直接操作节点。参考引用[2]中的示例,使用了字符串ref(但注意,字符串ref已过时):```jsxthis.refs.content.focus()```而在引用[5]中,有一个使用回调Ref的例子:```jsx<inputtype="text"ref={(input)=>{this.textInput=input}}/>```这里,给ref属性传递了一个函数,这个函数接收一个参数(即DOM元素),然后将该DOM元素赋值给组件实例的textInput属性。这样,在组件的其他地方就可以通过this.textInput来访问这个input元素。此外,在函数式组件中,我们也可以使用回调Ref,但是要注意函数式组件没有实例,所以不能直接给函数式组件使用ref(除非使用forwardRef,但那是转发ref,不是回调Ref)。不过,回调Ref可以用在函数式组件内部的DOM元素上。下面给出一个在类组件中使用回调Ref的示例:```jsxclassAppextendsReact.Component{constructor(props){super(props);this.textInput=null;}componentDidMount(){//组件挂载后,textInput已经指向了对应的DOM元素if(this.textInput){this.textInput.focus();}}render(){return(<div><inputtype="text"ref={(el)=>{this.textInput=el;}}/></div>);}}```在函数式组件中,我们可以使用useRef结合回调Ref方式来达到同样的效果,但是更推荐的方式是直接使用useRef来创建ref对象,然后在ref属性中引用该对象。不过,如果需要更精细的控制(例如在ref变化时执行某些操作),则可以使用回调Ref。在函数式组件中使用回调Ref的示例:```jsximportReact,{useState,useEffect,useCallback}from'react';functionTextInput(){const[text,setText]=useState('');consttextRef=useRef(null);constsetTextInputRef=useCallback((node)=>{if(node){node.focus();}textRef.current=node;},[]);return(<inputtype="text"value={text}onChange={(e)=>setText(e.target.value)}ref={setTextInputRef}/>);}```注意:上面的例子中,我们定义了一个回调函数setTextInputRef,并将其赋给ref属性。当input元素挂载时,这个回调函数会被调用,并将input元素作为参数传入,然后我们将它赋值给textRef.current,同时调用focus方法。但是,需要注意的是,回调Ref可能会被调用两次:一次是当组件挂载时(传入DOM元素),另一次是当组件卸载时(传入null)。所以在设置的时候要小心。总结一下,回调Ref的用法就是给ref属性传递一个函数,这个函数会在组件挂载或卸载时自动执行,并将当前元素作为参数传入。§§相关问题§§1.React中有几种创建ref方式?它们有什么区别?2.回调Ref和createRef()创建的ref对象在使用上有什么不同?3.为什么React建议不要过度使用ref?</think> ### React ref 函数用法详解 React 中的 ref 函数(也称为**回调 ref**)允许您在组件渲染后直接访问 DOM 节点或组件实例。与 `React.createRef()` 相比,回调 ref 提供更细粒度的控制,特别适合需要在 ref 值变化时执行操作的情况。 #### 基本用法(类组件) ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.textInput = null;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值