React 中 ref 如何使用？-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 中 ref 如何使用？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在React 中要使用 ref ，首先要创建一个新的对象

// 创建 ref 对象于jsx 绑定
  const inputRer = useRef(null);

在使用 ref 时不要在组件渲染时使用 ref 进行 dom 操作，因为此时ref 还没有值，会报错
（注意：操作文本框时尽量不要用 ref，推荐使用状态及受控组件来操作）

在 React 中，使用 ref 来直接操作 input 元素是可能的，但并不推荐这种做法，因为它违背了 React 的设计理念和优势。

React 的核心思想之一是将组件状态（state）作为数据源，根据状态的变化来触发页面的重新渲染。使用受控组件的方式，将表单元素的值绑定到组件状态上，可以很好地与 React 响应式的特性配合，实现组件的状态驱动。

而直接通过 ref 操作 input 元素，则绕过了 React 组件状态的控制，使得状态变化无法被跟踪和管理。这样做会影响到 React 组件的可维护性和可测试性，增加代码的复杂度，并且容易引入潜在的错误。

此外，使用受控组件的方式还可以方便地进行表单验证、处理用户输入等操作。通过在状态更新时执行相应的逻辑，可以实现更精细的交互和错误处理。

当确实需要直接操作 DOM 元素时，可以使用 ref 来获取元素的引用。但是需要注意，将 ref 用于非受控组件或其他用途时，应当谨慎权衡使用场景，并确保维护良好的代码结构和一致性。

综上所述，推荐使用受控组件的方式来处理表单元素，以利用 React 的优势和设计理念，提高代码的可维护性和可扩展性。

完整使用代码：文章来源地址https://www.toymoban.com/news/detail-608165.html

import { useRef } from "react";

const App = () => {
  // 创建 ref 对象于jsx 绑定
  const inputRer = useRef(null);

  /* 
  在使用 ref 时不要在组件渲染时使用 ref 进行 dom 操作，因为此时ref 还没有值，会报错
  （注意：操作文本框时尽量不要用 ref，推荐使用状态及受控组件来操作）
  */

  return (
    <div>
      <input type="text" ref={inputRer} />

      {/* 可以通过 ref 来操作input ，但是尽量不用，这样不符合 react 的设计理念和优势 */}
      <button onClick={() => console.log(inputRer.current.value)}>显示</button>
      {/* 必须要通过 .current 才能拿到 DOM 对象 */}
      <button onClick={() => inputRer.current.focus()}>获取焦点</button>
    </div>
  );
};

export default App;