реагировать, как использовать ссылки

Question

Я новичок в Reactjs.Я пытаюсь создать проигрыватель историй (например, аудиоплеер, но с историями).

https://i.stack.imgur.com/WX6sI.jpg

render() {
    const storiesList = this.props.stories;
    return(
        <div>
            {
                storiesList.map((story, k) => {
                return(
                    <div
                        ref={this.myRef}
                        key={k}
                        className="story"
                        onClick={() => this.playAudio(story.playing_url)}
                        onChange={console.log(this.myRef.current)}
                    >
                        <img 
                            src={story.image_url}
                            className="story-img"
                            alt="story"
                        />
                        <div className="story-play">
                            <div className="story-play-inner">
                            {
                                this.state.playing_story === story.playing_url && this.state.playing
                                ? <span>&#124; &#124;</span>
                                : <span>&#9654;</span>
                            }
                            </div>
                        </div>
                        <p className="story-name">
                            {story.name}
                        </p>

                    </div>
                )
            })}
            <div className="progress-bar" >

            <div className="playBtn">
                <span>&#9654;</span>
            </div>
            <div className="progress-container">
                <div className="progress-title">
                    <span>Story name</span>
                </div>
                <div className="timeline">
                    <div className="playhead"></div>
                </div>
            <div className="progress-time">
                <span className="progress-time-played">4:55 </span>
                <span className="progress-time-total">/ 8:15</span>
            </div>
            </div>

        </div>

         </div>
    )
}
}

Когда я консоль регистрирую ссылки, они всегда возвращают одни и те же 4 истории.Как я могу получить доступ к ссылке на элемент, на который я нажимаю?Мне нужно сделать это, чтобы я мог отобразить название истории на индикаторе выполнения.

Answer 1

Нет необходимости в ref с здесь - вместо этого просто передайте обратно весь story вашему onClick обратному вызову:

// instead of this
onClick={() => this.playAudio(story.playing_url)}
// do this
onClick={() => this.playStory(story)}

Затем вы можете setState внутри playStory, так что this.state.story - это играющая в данный момент история.

playStory(story) {
  this.setState({ story: story });
  this.playAudio(story.playing_url);
}

А в вашем render методе вы просто смотрите на this.state.story:

var story_title = null;
if (this.state && this.state.story) {
  story_title = <span className="story-title">{this.state.story}</span>;
}

return (
  <!-- ... snip ... -->
  <div className="progress-title">
    {story_title}
  </div>
);