Javascript 如何链接onclick回调调用外部文件

我创建了按钮数组，假设我有20个按钮。我还有20个mp3文件。现在我要做的是将按钮回调“onclick”与 特定的.mp3文件。因此，当点击5号按钮时，将执行第5个mp3。如何通过修改以下内容来完成此任务 邮政编码？请提供一个例子

注意：mp3文件保存在本地硬盘上

请让我知道如何将值传递给onClick回调

代码：

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

var arrButtons = [];
var buttonStyle = {
  margin: "10px 10px 10px 0"
};

class ButtonClicks extends React.Component {
  constructor(props) {
    super(props);
    this.onClickFunction = this.onClickFunction.bind(this);
  }
  onClickFunction() {
    console.log("button ");
    console.log(this.props.log);
  }
  render() {
    for (let i = 0; i < 10; i++) {
      //Moved your loop outside render()'s return
      arrButtons.push(
        <button style={buttonStyle} onClick={this.onClickFunction}>
          {i}
          {this.props.i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);

export default ButtonClicks;

从“React”导入React；
从“react dom”导入react dom；
从“创建反应类”导入createReactClass；
var=[]；
var按钮样式={
保证金：“10px 10px 10px 0”
};
类按钮链接扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onClickFunction=this.onClickFunction.bind（this）；
}
onClickFunction（）{
控制台日志（“按钮”）；
console.log（this.props.log）；
}
render（）{
for（设i=0；i<10；i++）{
//将循环移到render（）的返回之外
按动按钮(
{i}
{this.props.i}
);
}
返回(
{arrButtons}{/*将按钮包装在div*/}中非常重要
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
导出默认按钮链接；

使用JS的.map并创建一个具有唯一onClick的按钮，将特定mp3的id传递回onClick函数，您将从中受益。从那里，您可以按id查找，然后仅播放该特定文件

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";


class ButtonClicks extends React.Component {
  constructor(props) {
    super(props);
    this.state = {mp3Files}
    this.onClickFunction = this.onClickFunction.bind(this);
  }
  onClickFunction(mp3UniqueIdToLookup) {
    console.log("button ");
    console.log(this.props.log);
    //Here you would search your files for the mp3 with the corresponding id and then play that one only.
  }
  render() {
    const buttonStyle = {
      margin: "10px 10px 10px 0"
    };

    return (
      <div>
       {this.state.mp3Files.map((index, ele) => {
         return <button style={buttonStyle} key={index} onClick={() => this.onClickFunction(ele.id)}/>
       })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);

export default ButtonClicks;

从“React”导入React；
从“react dom”导入react dom；
从“创建反应类”导入createReactClass；
类按钮链接扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={mp3Files}
this.onClickFunction=this.onClickFunction.bind（this）；
}
onclick函数（mp3UniqueIdToLookup）{
控制台日志（“按钮”）；
console.log（this.props.log）；
//在这里，您可以在文件中搜索具有相应id的mp3，然后仅播放该文件。
}
render（）{
常量按钮样式={
保证金：“10px 10px 10px 0”
};
返回(
{this.state.mp3Files.map（（index，ele）=>{
返回此.onclick函数（ele.id）}/>
})}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
导出默认按钮链接；

这是我的解决方案。在执行循环时，可以将no传递给事件处理程序函数并访问no。这就是执行循环时的工作方式

ES5方式

import React, {Component} from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

var arrButtons = [];
var buttonStyle = {
  margin: "10px 10px 10px 0"
};

class ButtonClicks extends Component {
  constructor(props) {
    super(props);
    this.onClickFunction = this.onClickFunction.bind(this);
  }
  onClickFunction(no) {
    console.log("Here you will get button no. if you click button 5 you will get button no 5 and you can pass the same to log");
    console.log(this.props.log(no));
  }
  render() {
    for (let i = 1; i <=10; i++) {
      arrButtons.push(
        <button style={buttonStyle} onClick={this.onClickFunction(i)}>
          {i}
          {this.props.i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);

export default ButtonClicks;

import React, {Component} from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

var arrButtons = [];
var buttonStyle = {
  margin: "10px 10px 10px 0"
};

class ButtonClicks extends Component {
  constructor(props) {
    super(props);
  }
  onClickFunction = (no) => {
    console.log("Here you will get button no. if you click button 5 you will get button no 5 and you can pass the same to log");
    console.log(this.props.log(no));
  }
  render() {
    for (let i = 1; i <=10; i++) {
      arrButtons.push(
        <button style={buttonStyle} onClick={this.onClickFunction(i)}>
          {i}
          {this.props.i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);

export default ButtonClicks;

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“创建反应类”导入createReactClass；
var=[]；
var按钮样式={
保证金：“10px 10px 10px 0”
};
类按钮链接扩展组件{
建造师（道具）{
超级（道具）；
this.onClickFunction=this.onClickFunction.bind（this）；
}
onclick函数（否）{
log（“这里您将获得按钮编号。如果单击按钮5，您将获得按钮编号5，您可以将其传递给log”）；
console.log（this.props.log（no））；
}
render（）{
for（设i=1；i{
log（“这里您将获得按钮编号。如果单击按钮5，您将获得按钮编号5，您可以将其传递给log”）；
console.log（this.props.log（no））；
}
render（）{
对于（设i=1；i我建议您给按钮提供其索引的ID，并在
onclick函数中接收它们，如下所示

onClickFunction(e) {
    var mp3Index = parseInt(e.target.id);
    console.log("button ");
    console.log(this.props.log);
  }
  render() {
    for (let i = 0; i < 10; i++) {
      //Moved your loop outside render()'s return
      arrButtons.push(
        <button id={i} style={buttonStyle} onClick={this.onClickFunction}>
          {i}
          {this.props.i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

onclick函数（e）{
var mp3Index=parseInt（e.target.id）；
控制台日志（“按钮”）；
console.log（this.props.log）；
}
render（）{
for（设i=0；i<10；i++）{
//将循环移到render（）的返回之外
按动按钮(
{i}
{this.props.i}
);
}
返回(
{arrButtons}{/*将按钮包装在div*/}中非常重要
);
}
}

从这里开始，您可以继续了解如何使用他们的索引。
请您解释一下，为什么您使用this.state.mp3文件而不是this.props.mp3文件？（2）ele.id（3）是什么以及为什么这是什么，道具。log@LetsamrIt我认为Gavin使用状态而不是道具，因为使用本地状态可以使示例片段看起来更完整，而无需提升状态并添加到示例主题外的代码。您需要按钮吗？您可以在
标记中直接给出mp3的URL或路径，它将开始下载