如何链接onclick回调调用外部文件
如何链接onclick回调调用外部文件
提问于 2018-08-01 23:52:26
我创建了一组按钮，假设我有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;回答 3
Stack Overflow用户
发布于 2018-08-02 00:03:38
您可以使用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;Stack Overflow用户
发布于 2018-08-02 00:36:50
这是我的解决方案。在执行循环时，您可以将no传递给事件处理函数并访问no。这就是执行循环时它的工作方式
ES5 way
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 way
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;Stack Overflow用户
发布于 2018-08-02 08:17:06
我建议您为您的按钮提供索引的in，并在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>
);
}
}从那里你可以继续学习如何使用他们的索引。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51637575
复制相关文章
相似问题