当前位置: 首页 > 文档资料 > Rax 中文文档 >

useRef

优质
小牛编辑
130浏览
2023-12-01

有时候,在编写组件时,我们不希望通过更改组件状态来重新渲染。例如,当创建一个 input 元素时,需要跟踪光标位置或者强制焦点时。使用类组件,我们可以跟踪将它们直接分配到这个属性上,但是函数组件没有我们可以那样引用的上下文。
useRef为这些情况提供了一种机制,返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数(initialValue)。返回的对象将存留在整个组件的生命周期中。

import { useRef } from 'rax';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
	// `current` points to the mounted text input element
	inputEl.current.focus();
  };
  return (
	<>
	  <input ref={inputEl} type="text" />
	  <button onClick={onButtonClick}>Focus the input</button>
	</>
  );
}