Question

我无法将URL引用传递给我的onClick事件处理程序changeTrack。我正在尝试从onClicked节目的URL更改加载到媒体播放器中的曲目URL。

我当前的代码给出了以下错误。

TypeError：无法读取未定义的属性“changeTrack”

我尝试了几种不同的绑定方法，例如

onClick={ this.changeTrack.bind(this, show.url )}
onClick={() => this.changeTrack(showurl)}

以及将show.url定义为showlink并使用它来定义changeTrack的属性。

let showlink = show.url;

我想知道我是否走在正确的轨道上，或者我是否完全误解了React中refs的目的。

这是我的代码：

   class MediaPlayer extends Component{
    constructor(props) {
        super(props);
        this.state = { 
          shows: [],           
          showURL: "https://www.mixcloud.com/NTSRadio/nosedrip-9th-january-2017/",`
        };
     this.changeTrack = this.changeTrack.bind(this);
    }

  changeTrack (url){
      let newUrl = url;
      this.setState({ showURL: newUrl});
  };



   componentDidMount() {
    const url = `https://api.mixcloud.com/NTSRadio/cloudcasts/?limit=${this.state.limit}`;
    const showsindex = fetch(url)
      .then(response => response.json())
      .then(data => this.setState({
        term: '',
        name: data.name,
        shows: data.data,
       }))
      .catch(e => console.log('error', e));
  }

render(){
   return (
     <div className="main">          
       <div className="grid">
          {this.state.shows.map(function(show) {
             let showlink = show.url;
               return (   
                <div className="show">   
                   <div className="showname" ref={show.url} onClick={() => this.changeTrack(showurl)}>
                      {show.name}
                   </div>
                </div>
             );
           })}
       </div>   
       <div className="mixcloud-player">
          <ReactPlayer  url={this.state.showURL} width='100%'
            height='60px' controls="true"/>
        </div>
    </div>
   );
}

Answer 1

渲染函数中的函数表达式创建一个新的lexical scope.使用胖箭头函数代替this来引用组件实例。同时将孩子的密钥分配给help with reconciliation：

{this.state.shows.map( show => 
    <div key={show.name} className="show">   
        <div className="showname" ref={show.url} onClick={() => this.changeTrack(show.url)}>
            {show.name}
        </div>
    </div>
)}

使用ref和媒体播放来处理事件处理

1 个答案: