this.refs.something returns "undefined"

Question

我有一个带有 ref 的元素已定义并最终呈现到页面中：

    <div ref="russian" ...>
       ...
    </div>

我想访问 DOM 元素属性，例如 offset... 之类的。但是，我一直收到 undefined 并且我一点也不知道为什么。经过一番搜索后，很明显 refs 仅适用于一个文件，但除了这一页之外，我没有在任何地方使用它。我说这个是为了记录它：

console.log('REFS', this.refs.russian);

可能是什么原因造成的？

Answer 1

检查您是否在挂载子组件之前访问 ref。例如。它在 componentWillMount 中不起作用。在挂载元素后自动调用 ref 相关回调的不同模式是 this-

<div ref={(elem)=>(console.log(elem))}/>

您也可以使用此表示法在深层嵌套中获取挂载元素 -

<div ref={this.props.onMounted}/>

Answer 2

使用 refs 的正确位置是在特定的 React 生命周期方法中，例如ComponentDidMount, ComponentDidUpdate

如果您将 console.log('REFS', this.refs.russian); 调用移动到 ComponentDidMount 或 ComponentDidUpdate 生命周期方法（假设您使用的是 React >= 14），您不应该得到 undefined 结果。

更新：根据上面link

的警告，无状态组件也无法使用 refs

Answer 3

从 React 版本 16.4 开始更新

在你的构造方法中，像这样定义你的 ref

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

在您使用 ref 的渲染中执行此操作。

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>

例如，如果您想在组件安装时获得焦点，请执行此操作

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

Answer 4

我在我的表单验证方法中遇到了类似的问题，试图分配 this.ref.current.reportValidity()

将我这样做的方法写成 validate = () => {} 而不是 validate() {} 帮助了我，但我不完全确定为什么，只是我从我的习惯中记住的东西过去的工作经验给了我这个。希望它能有所帮助，并且有人可以澄清这个答案，说明为什么这可能会起作用。

Answer 5

如果您正在导出 class withStyle，请移除并正常导出默认值。

Answer 6

与其将 Console.log 放入函数 example(){...} 中，不如将其放入：

example=()=>{....}

javascript