У меня в настоящее время есть некоторые проблемы с моими реактивными опорами. У меня есть класс Songs
, который содержит массив из 10 песен, и каждый из компонентов song
имеет свой собственный компонент playPause
с опорой number
. Доступ к this.props.number
в playPause
работает нормально во всех функциях, кроме одной.
Возвращает подходящие номера для всех компонентов (1-10, за исключением одного нажатого). - Правка: полный код этого бита в основном равен и :
handleClickOutside=(event)=> {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
console.log(this.props.number);
}
};
Редактировать: onStateChanged является частью Spotify Web API - он вызывается при изменении состояния игрока (воспроизведение / пауза).
Возвращает только число 10 (номер числа последнего компонента) - независимо от того, какой компонент вызывает функцию.
createEventHandlers()
{
this.player.on('player_state_changed',state => this.onStateChanged(state));}
onStateChanged=(state)=> {
if (state !== null) {
if(state.paused){
console.log(this.props.number); //returns 10
}
}
};
Редактировать: еще немного кода:
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
setWrapperRef=(node)=> {
this.wrapperRef = node;
};
render() {
return(
<div ref={this.setWrapperRef}>
<div className={this.state.playing ? 'overlay visible': "overlay"} onClick={this.togglePlayIcon}>
<b className="icon" title="Play Song">
<i className={this.state.playState}></i>
</b>
</div>
</div>
);
checkForPlayer()
{
clearInterval(this.playerCheckInterval);
if (window.Spotify !== null) {
this.player = new window.Spotify.Player({
name: "Top10 Spotify Player",
getOAuthToken: cb => { cb(PlayPause.readCookie("access_token")); },
volume: 0.1
});
this.createEventHandlers();
// finally, connect!
this.player.connect();
}
}
Полагаю, мне нужно куда-нибудь связать this
, но я не могу понять, где именно. Любой совет?