javascript - this.refs.something 返回“未定义”

Question

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

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

我想访问 DOM 元素属性之类的offset...东西。然而，我不断得到undefined，我不知道为什么。经过一番搜索，很明显refs只适用于一个文件，但除了这一页之外，我没有在任何地方使用它。我这样说是为了记录它：

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

这可能是什么原因造成的？

score 43 · Accepted Answer

在安装子组件之前检查您是否没有访问 ref。例如，它在componentWillMount. 在安装元素后自动调用 ref 相关回调的另一种模式是 -

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

您也可以使用此表示法在深度嵌套中获取已安装的元素 -

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

score 36 · Accepted Answer

正确的工作地点refs是在特定的 React 生命周期方法中，例如ComponentDidMount、ComponentDidUpdate

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

更新：根据上面的警告链接，refs 也不适用于无状态组件

score 9 · Accepted Answer

自 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();
 }

score 1 · Accepted Answer

Instead of putting your Console.log inside the function example(){...} you should put it inside:

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

score 0 · Accepted Answer

0

如果您正在导出带有样式的类，请删除并正常导出默认值。

于 2019-04-09T16:59:33.687 回答

score 0 · Accepted Answer

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

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

6 回答 6