使用 React.js class 组件中的函数更改状态的属性

Question

我有一个使用 react-h5-audio-player 的基本音频播放应用程序。

在其基本形式中，AudioPlayer 组件采用源，我已将此媒体存储在本地并正在尝试构建一个 parent Player AudioPlayer 组件作为 parent 包含使用 class 组件切换媒体源的功能。

我已将曲目的标题及其数据路径存储在包含三个 objects 的单个状态中。我想改变 AudioPlayer 的来源，使用函数更改数据引用。

这是我的代码，尝试使用 psudo 填充逻辑，这些区域周围有 Asterix：

import track1 from "../audio/01.mp3"
import track2 from "../audio/02.mp3"
import track3 from "../audio/03.mp3"

class Player extends React.Component {

    constructor(){
    super()

    this.state = [
        {title: "first track", data: track1},
        {title: "second track", data: track2},
        {title: "third track", data: track3},
    ]

    }

     changeData( **data value** ){
      **my new state = this.state[ data value ].data**
    }
  
    render(){
        return <div style={{color: this.props.color}}>
            <h1>Player</h1>
           <AudioPlayer
            src= {  **my new state**  }
            onPlay={e => console.log("onPlay")}
            // other props here
            />
            <div style={{color: "green"}}>
                <ul>
                    <li onClick={()=> this.changeData( **data value** )}>{this.state[0].title}</li>
                    <li onClick={()=> this.changeData( **data value** )}>{this.state[1].title}</li>
                    <li onClick={()=> this.changeData( **data value** )}>{this.state[2].title}</li>
                </ul>
            </div>
        </div>
    }
}

export default Player

大部分在线指南都是关于改变状态和使用 this.setSate 来改变整个状态本身。我正在努力使用它，因为我正在尝试更改/表示特定属性。

如有任何指导或建议，我们将不胜感激！这是我第一次使用 gatsby / react.js 如果我用错误的逻辑处理这个问题，我深表歉意。

Answer 1

为此，我建议使用额外的状态来处理音频播放器的动态源。这是相同的示例：

import track1 from "../audio/01.mp3"
import track2 from "../audio/02.mp3"
import track3 from "../audio/03.mp3"

class Player extends React.Component {

    constructor(){
    super()

    this.state = {
        tracks: [
          {title: "first track", data: track1},
          {title: "second track", data: track2},
          {title: "third track", data: track3},
        ],
        currentTrack: 0,
    }

    }

     changeData(trackIndex){
      this.setState({currentTrack: trackIndex})
    }
  
    render(){
        return <div style={{color: this.props.color}}>
            <h1>Player</h1>
           <AudioPlayer
            src= {this.state.tracks[this.state.currentTrack].data}
            onPlay={e => console.log("onPlay")}
            // other props here
            />
            <div style={{color: "green"}}>
                <ul>
                    {this.state.tracks.map((trackElem, index) => (
                       <li onClick={()=> this.changeData(index)}>{trackElem.title}</li>
                    ))}
                </ul>
            </div>
        </div>
    }
}

export default Player

使用 React.js class 组件中的函数更改状态的属性

Changing properties of a state using a function within React.js class component

javascript

html

reactjs

react-class-based-component