Javascript 如何在ReactJS中使用lis创建播放列表
我正在尝试创建一个用户界面,允许用户将MP3从电脑下载到播放列表中。现在,我已经得到了歌曲的名称和指向正确歌曲的李的href。但现在我想知道如何在用户每次单击li时播放音频元素上的歌曲。现在看起来是这样的: 我的状态是这样的: 这是我的密码:Javascript 如何在ReactJS中使用lis创建播放列表,javascript,reactjs,filereader,Javascript,Reactjs,Filereader,我正在尝试创建一个用户界面,允许用户将MP3从电脑下载到播放列表中。现在,我已经得到了歌曲的名称和指向正确歌曲的李的href。但现在我想知道如何在用户每次单击li时播放音频元素上的歌曲。现在看起来是这样的: 我的状态是这样的: 这是我的密码: class DownloadTest extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick
class DownloadTest extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.inputRef = React.createRef();
this.state = {
files: []
};
}
handleClick = event => {
// Helper code to read file and return promise
const readFile = (file) => {
const fileList = [];
const fileReader = new FileReader();
// create the promise and return it
return new Promise((resolve, reject) => {
// if file reader has an error, report it
fileReader.onerror = (error) => {
reject({ error })
}
// if success, resolve the promise
fileReader.onload = (e) => {
resolve({
name: file.name,
link: e.target.result
})
}
// start reading the file
fileReader.readAsDataURL(file);
})
}
// create all the file reader promises
// create an array from the files list and use map to generate
// an array of promises
const allReaders = Array.from(event.target.files).map(readFile)
// Now handle the array of promises we just created
Promise.all(allReaders)
.then(fileList => {
console.log(fileList)
// set the state that we have all the files
this.setState({ files: fileList });
})
.catch(error => {
console.error(error)
});
}
render() {
console.log(this.state);
return (
<div className="downloadMusic">
<div className="input">
<input
onChange={this.handleClick}
id="upload-file"
className="inputName"
type="file"
multiple
ref={this.inputRef}
/>
</div>
<div className="audio-player">
<audio
src="my_audio_file.ogg"
autoPlay
controls
/>
</div>
<div>
<ul ref={this.ulRef}>
{this.state.files.map((file, index) => (
<li key={index}>
<a href={file.link}>{file.name}</a>
</li>
))}
</ul>
</div>
</div>
);
}
}
export default DownloadTest;
类下载测试扩展了React.Component{
建造师(道具){
超级(道具);
this.handleClick=this.handleClick.bind(this);
this.inputRef=React.createRef();
此.state={
文件:[]
};
}
handleClick=事件=>{
//读取文件并返回承诺的帮助程序代码
常量读取文件=(文件)=>{
常量文件列表=[];
const fileReader=new fileReader();
//创造承诺并回报它
返回新承诺((解决、拒绝)=>{
//如果文件读取器有错误,请报告它
fileReader.onerror=(错误)=>{
拒绝({error})
}
//如果成功了,就要兑现承诺
fileReader.onload=(e)=>{
决心({
name:file.name,
链接:e.target.result
})
}
//开始读取文件
fileReader.readAsDataURL(文件);
})
}
//创建所有文件读取器承诺
//从文件列表创建一个数组,并使用映射生成
//一系列承诺
const allReaders=Array.from(event.target.files).map(readFile)
//现在处理我们刚刚创建的一系列承诺
承诺。所有(所有读者)
。然后(文件列表=>{
console.log(文件列表)
//设置我们拥有所有文件的状态
this.setState({files:fileList});
})
.catch(错误=>{
控制台错误(错误)
});
}
render(){
console.log(this.state);
返回(
))}
);
}
}
导出默认下载测试;
更新答案,经过测试,效果良好。可以使用组件状态更改音频元素源
import React from "react";
import { render } from "react-dom";
import Joy from "./joy.wav"
import Alive from "./alive1.wav"
class App extends React.Component {
constructor() {
super();
this.state = {
audio: Joy
}
}
render() {
return (
<div>
<button onClick={() => this.setState({ audio: Alive })}>
Change audio
</button>
<audio src={this.state.audio} controls />
</div>
)
}
}
从“React”导入React;
从“react dom”导入{render};
从“/Joy.wav”导入Joy
从“/alive1.wav”实时导入
类应用程序扩展了React.Component{
构造函数(){
超级();
此.state={
音频:Joy
}
}
render(){
返回(
this.setState({audio:Alive}}>
更改音频
)
}
}
您不能像使用react更改图像一样更改音频元素中的文件吗?我认为你不需要文件阅读器
@Kokodoko你能更详细地介绍一下吗?我创建了一个测试,它可以工作。你说接受答案是什么意思?你想让我核对一下答案吗?谢谢,哈哈