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