在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 的优势和设计理念，提高代码的可维护性和可扩展性。
完整使用代码：
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;
