[英]Changing properties of a state using a function within React.js class component
我有一個使用 react-h5-audio-player 的基本音頻播放應用程序。
在其基本形式中, AudioPlayer組件需要一個源,我已將此媒體存儲在本地,並嘗試圍繞 AudioPlayer 構建一個父Player組件,該組件包含一個 function,它使用 class 組件切換媒體源。
我已將曲目的標題及其數據路徑存儲在包含三個對象的單個 state 中。 我正在尋找更改 AudioPlayer 的來源,使用 function 更改數據引用。
這是我的代碼,嘗試使用 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更改整個 state 本身。 當我試圖更改/表示特定屬性時,我正在努力使用它。
任何指導或建議將不勝感激。 這是我第一次使用 gatsby / react.js,如果我用錯誤的邏輯來處理這個問題,我深表歉意。
為此,我建議使用額外的 state 來處理音頻播放器的動態源。 這是相同的示例:
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.