[英]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.