createRef
createRef
创建一个 ref 对象,该对象可以包含任意值。
class MyInput extends Component {
inputRef = createRef();
// ...
}
参考
createRef()
在 class 组件 中调用 createRef
来声明一个 ref。
import { createRef, Component } from 'react';
class MyComponent extends Component {
intervalRef = createRef();
inputRef = createRef();
// ...
参数
createRef
不接受任何参数。
返回值
createRef
返回一个对象,该对象只有一个属性:
current
:初始值为null
,你可以稍后设置为其他内容。如果你把 ref 对象作为 JSX 节点的ref
属性传递给 React,React 将设置其current
属性。
注意事项
createRef
总是返回一个 不同的 对象。这相当于你自己编写了{ current: null }
。- 在函数组件中,你可能想要使用
useRef
,因为它始终返回相同的对象。 const ref = useRef()
等同于const [ref, _] = useState(() => createRef(null))
。
用法
在 class 组件中声明 ref
要在 class 组件 中声明一个 ref,请调用 createRef
并将其结果分配给 class 字段:
import { Component, createRef } from 'react';
class Form extends Component {
inputRef = createRef();
// ...
}
如果你现在将 ref={this.inputRef}
传递给 JSX 中的 <input>
,React 将把 input 的 DOM 节点赋值给 this.inputRef.current
。例如,下面这段代码演示了如何创建一个按钮,点击该按钮会将焦点聚焦在输入框上:
import { Component, createRef } from 'react'; export default class Form extends Component { inputRef = createRef(); handleClick = () => { this.inputRef.current.focus(); } render() { return ( <> <input ref={this.inputRef} /> <button onClick={this.handleClick}> 聚焦这个输入框 </button> </> ); } }
替代方案
从使用 createRef
的 class 组件迁移到使用 useRef
的函数组件
我们建议在新代码中使用函数组件而不是 class 组件。如果你有一些使用了 createRef
的 class 组件,以下是如何将它们转换为函数组件。这是原始代码:
import { Component, createRef } from 'react'; export default class Form extends Component { inputRef = createRef(); handleClick = () => { this.inputRef.current.focus(); } render() { return ( <> <input ref={this.inputRef} /> <button onClick={this.handleClick}> 聚焦这个输入框 </button> </> ); } }
当你 将此组件从 class 组件转化为函数组件 时,用 useRef
替换 createRef
的调用:
import { useRef } from 'react'; export default function Form() { const inputRef = useRef(null); function handleClick() { inputRef.current.focus(); } return ( <> <input ref={inputRef} /> <button onClick={handleClick}> 聚焦这个输入框 </button> </> ); }