react ref怎么使用

### 如何在 React 中使用 `ref` 进行 DOM 操作或访问组件实例 #### 使用 `React.createRef` 当需要创建一个传统的回调形式的 `ref` 时，可以使用 `React.createRef()` 方法。此方法会在组件挂载时分配一个新的容器来保存对 DOM 节点或者类组件实例的引用[^1]。 ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } focusInput() { if (this.inputRef.current) { this.inputRef.current.focus(); // 访问实际的DOM节点并调用focus方法 } } render() { return ( <div> <input type="text" ref={this.inputRef} /> <button onClick={() => this.focusInput()}> Focus Input </button> </div> ); } } ``` #### 使用 `useRef` 钩子 对于函数式组件来说，推荐使用 `useRef` 来代替 `createRef`。它不仅能够存储对 DOM 的引用，还可以用来保持任何可变值，在多次渲染之间不会改变。 ```javascript function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { if (inputEl && inputEl.current) { inputEl.current.focus(); // 直接操作DOM元素 } }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } ``` #### 使用 `forwardRef` 将 Refs 向下传递给子组件 如果希望父组件能直接获取到某个子组件内部的具体 DOM 或者实例，则需要用到 `React.forwardRef` 工具。 ```javascript const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // 父级可以直接拿到按钮的真实dom对象 <FancyButton ref={(btn) => console.log('Btn:', btn)}>Click me!</FancyButton>; ``` #### 反向访问非受控组件中的 DOM 实例 有时我们需要处理一些表单输入字段作为非受控组件的情况，此时可以通过 refs 获取这些 HTML 元素的实际状态数据[^2]。 ```javascript class Form extends React.Component { constructor(props){ super(props); this.textInput = React.createRef(); } handleSubmit(event){ alert(`Value: ${this.textInput.current.value}`); event.preventDefault(); } render(){ return( <form onSubmit={(e)=>this.handleSubmit(e)}> <input type='text' ref={this.textInput}/> <button>Submit</button> </form> ) } } ``` #### 总结 以上介绍了几种不同的方式用于在 React 应用程序中实现对底层 DOM 元素的操作以及如何利用它们完成特定功能需求。无论是通过声明式的 API 设计还是借助于更灵活的方法论支持复杂场景下的交互逻辑构建都显得尤为重要。