如何在 React 中使用 useRef 添加值

在 React 中，我们经常会需要引用到某个元素的属性或者需要保存某个变量的状态。如果使用传统的 DOM 操作方式可能会比较繁琐，但是使用 useRef 钩子函数就能够方便的实现这些功能。

什么是 useRef？

useRef 是 React 提供的一个钩子函数，用于在函数组件中保存一个可变的引用变量。这个引用可以是一个 DOM 元素，也可以是任何我们想要保存的数据。

使用 useRef 添加值

我们可以通过 useRef 钩子的 current 属性来设置或修改这个引用变量的值。下面是一个例子：

import { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.value = 'Hello, world!';
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

在这个例子中，我们创建了一个 inputRef 引用变量并将它绑定到了一个 <input> 元素上。当我们点击按钮时，调用 handleClick() 方法，则会将输入框的值设置为 "Hello, world!"。

需要注意的是，我们使用 useRef 钩子来创建了这个引用变量，并将其作为 ref 属性传递给了 <input> 元素。这样就可以通过 inputRef.current 来访问这个 <input> 元素的属性或者修改它的值了。

总结

useRef 钩子函数在 React 中非常常用。它提供了一种对 DOM 元素或其他值进行引用和修改的方式。在使用 useRef 钩子时，需要注意这个钩子返回的不是状态的响应式对象，而是一个普通的 JavaScript 对象。因此，在修改 current 属性时，不会自动触发组件的重新渲染。