[英]Changing properties of a state using a function within React.js class component
I have a basic audio playing app using react-h5-audio-player.我有一个使用 react-h5-audio-player 的基本音频播放应用程序。
In its basic form, the AudioPlayer component takes a source, I have stored this media locally and am attempting to build a parent Player component around AudioPlayer as a parent that contains a function that switches the media source using a class component.在其基本形式中, AudioPlayer组件需要一个源,我已将此媒体存储在本地,并尝试围绕 AudioPlayer 构建一个父Player组件,该组件包含一个 function,它使用 class 组件切换媒体源。
I have stored the title of the tracks as well as their data pathways in a single state containing three objects.我已将曲目的标题及其数据路径存储在包含三个对象的单个 state 中。 I am looking to alter the source of the AudioPlayer, changing the data reference using a function.
我正在寻找更改 AudioPlayer 的来源,使用 function 更改数据引用。
Here is my code with some attempt to fill in the logic using psudo, these areas have Asterix around them:这是我的代码,尝试使用 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
Most of the guidance online has been about altering states and using this.setSate to change the entire state itself.大多数在线指导都是关于更改状态并使用this.setSate更改整个 state 本身。 I am struggling to use this as I am attempting to change / represent specific properties.
当我试图更改/表示特定属性时,我正在努力使用它。
Any guidance or advice would be really appreciated.任何指导或建议将不胜感激。 This my first time using gatsby / react.js so apologies if I am approaching this with the wrong logic.
这是我第一次使用 gatsby / react.js,如果我用错误的逻辑来处理这个问题,我深表歉意。
For this, I will suggest using an additional state to handle the dynamic source for the audio player.为此,我建议使用额外的 state 来处理音频播放器的动态源。 Here is the sample for the same:
这是相同的示例:
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.