Question

基本上我在UI中有一个录制的音频，它有一个播放/暂停按钮。有一个state属性playing，根据this.state.playing是true还是false决定应该在该按钮中呈现哪个图标。现在问题是在完全播放音频后，暂停图标不会自动更改为播放图标，原因是this.state.playing仍然是true。我知道音频播放完成后我需要执行setState并将playing更改为false。我的问题是我应该在哪里执行setState以确保它仅在音频完全播放后才能执行？

state = {
        playing: false
    }

onPlayPause = () => {
        let { playing } = this.state 
        if(playing) {
            this.setState({ playing: false })
            this.audio_el.current.pause()
        } else {
            this.setState({ playing: true })
            this.audio_el.current.play()
            // Need to make {playing: false} only after play() is completed
        }
    }

内部render()方法：

<Button onClick={ this.onPlayPause } icon={ playing ? "pause" : "play" }/>

我尝试在setState内执行componentDidMount()，但没有运气:(

Answer 1

尝试使用setState绑定新方法，方法是通过媒体事件（更多关于它：https://reactjs.org/docs/events.html#media-events）在音频元素上调用onEnded。那应该做的工作。

你在render（）中有这样的东西：

<audio src="..." onEnded={this.setFinished}>

然后添加此方法：

setFinished = () => {
    this.setState({
        playing: false
    })
}

完全播放音频后执行setState

1 个答案: