Question

我创建了按钮数组，假设我有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;

Answer 1

您将受益于使用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;

Answer 2

这是我的解决方案。在执行循环时，您可以将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;

ES6方法

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;

Answer 3

我建议您为按钮提供其索引ID，并像这样在onClickFunction中接收它们

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回调以调用外部文件

3 个答案: