javascript - React取不到ref的对象

问题描述

问 题

class music extends React.Component {
constructor(props){
  super(props);
  this.state = {
      isPlay : false
  }
}

componentDidMount(){
  console.log('DidMount');
  console.log(this.ref.musicBox);
}

render(){
  return (
  <div>
     <div className="record">
      <img src="./images/唱片.svg"/>
      </div>
      <div className='music'>
      <audio ref="musicBox" src="./music/Lost Stars.mp3" controls="controls" loop='loop'>
       Your browser does not support the audio element.
      </audio>
      </div>
  </div>
 )
 }
}

想要取到audio标签然后判断它是否播放。但是在componentDidMount(){}中console它时报错：

DidMount
Cannot read property 'musicBox' of undefined

其实昨天在另外一个JS里面也遇到这个问题了~但是因为另外一个ref是写在动态生成的标签里面的，百度到说动态生成的标签ref会取不到。
但是这里是为什么会取不到ref呢？就在一个组件内，componentDidMount的this也应该不需要重新绑定的。

解决方案

https://facebook.github.io/re...

我看官方用的是this.refs 不是this.ref
你试试看吧 我这里没有运行环境

这篇关于javascript - React取不到ref的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！