时间戳

首页 > 解决方案 > 从另一个组件更新一个组件的状态

javascript - 从另一个组件更新一个组件的状态

问题描述

我想从另一个组件更新组件的图标。每当我单击播放列表音乐开始播放并且图标应该更改为暂停而不是播放但我不知道如何从另一个组件更新组件的状态。

PlayList 组件 - 播放列表和音乐都在这个组件中

class PlayList extends React.Component {
    render() {
        const playMusic = () => {
            musics.forEach(e => e.pause());
            musics[this.props.arr].play();
            musics[this.props.arr].currentTime = 0;
            nowPlaying = this.props.arr;
            clickedOnMusic = 'clicked';
        };
        return (
            <div>
                <Card>
                    <CardActionArea onClick={playMusic} />
                </Card>
            </div>
        )
}



BottomAppBar 组件 - 图标和一些播放音乐的功能在这里

class BottomAppBar extends React.Component {
    state = {
        displayPlay: 'none',
        displayPause: '',
        displayVolume: '',
        displayMute: 'none'
    };
    render(){
        return(
            <IconButton onClick={handleChangePlay} style={{ color: 'white' }}>
                <PauseCircleOutlineRoundedIcon
                    style={{ fontSize: 46, display: this.state.displayPlay }}
                />
                <PlayCircleOutlineIcon
                    style={{ fontSize: 46, display: this.state.displayPause }}
                />
      )
}

非常感谢您的阅读！

标签： javascriptreactjs

解决方案

将它们包装在一个容器中并在那里保持它们的状态。前任：

<Parent>
   <PlayList/>
   <BottomAppBar />
</Parent>

推荐阅读