0

react-h5-audio-player を使用した基本的なオーディオ再生アプリがあります。

その基本的な形式では、AudioPlayerコンポーネントはソースを受け取ります。このメディアをローカルに保存し、クラス コンポーネントを使用してメディア ソースを切り替える関数を含む親として AudioPlayer の周りに親Playerコンポーネントを構築しようとしています。

トラックのタイトルとデータ パスを、3 つのオブジェクトを含む 1 つの状態に保存しました。関数を使用してデータ参照を変更し、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 を使用するのはこれが初めてなので、間違ったロジックでこれに取り組んでいる場合はお詫びします。

4

1 に答える 1