互联网应用开发 问题集锦系列（一）

互联网应用开发 问题集锦

2022年3月21日 雨 星期一 记此文于上海虹桥希岸酒店

问题：React开发前端中，我目前设置了一些按钮（按钮1、按钮2、按钮3），我需要的目标是单击一个按钮，分别播放编号为1、2、3的音乐，或者执行1、2、3对应的任务，这些任务略有差异，现在我希望把1、2、3按钮处理单击事件的函数统一，通过参数来识别发出的按钮，该如何操作？

解答： 首先 <audio> 是html5 中的一个特性标签元素，可以用作一个音乐播放器。其次，通常来说在React框架中，我们用 onClick = {handleFunction1()} 这种方式来处理事件，但是这个案例中，事件可能来自不同的按钮，我们要分情况处理，这就需要在 onClick = {handleFunction1()} 中传递参数，从而来识别。

最开始，我有时候会是这么写代码的：例如在 render 返回一个按钮。

<Button onClick = {handleClickFunction1()}>

此外我定义好这个函数，在这个js文件里面：

function handleClickFunction1()
{
	alert("testing alert")
}

然后会出现一个很奇妙的问题，每次刷新页面的时候，就会弹出这个消息提醒框。这是因为加了括号的含义是立即执行，添加事件的回调函数应该就是给相应的事件属性赋值，而很明显需要把一个函数赋值给这个事件属性，而不是函数的调用结果。所以在js中的绑定是直接赋值。而在标签内的事件属性的值是由引号包裹的，代表的是当点击该元素时，执行引号内的代码，直接把引号内的代码拿出来跑， 如果你不加括号，那就不会调用那个函数。

那么我要如何传递参数呢？推荐使用箭头函数！

<Button onClick={(e) => this.myFunction("1")}>按钮</Button>

由于我是用了Antd组件库，所以下面是我的代码：

<Menu.ItemGroup title="我的音乐">
	<Menu.Item key="setting:18" onClick={(e) => this.musicPlay("1")}>1: 勾指起誓</Menu.Item>
	<Menu.Item key="setting:19" onClick={(e) => this.musicPlay("2")}>2: 雨幕</Menu.Item>
	<Menu.Item key="setting:20" onClick={(e) => this.musicPlay("3")}>3: 1967</Menu.Item>
	<Menu.Item key="setting:21" onClick={(e) => this.musicPlay("4")}>4: 人世间</Menu.Item>
	<Menu.Item>上传</Menu.Item>
</Menu.ItemGroup>

此外，由于我们没有 import 音频资源，要用 require() 函数获取。

musicPlay(musicId){
        let tmp = document.getElementById("BackgroundMusic");
        if(tmp)
        {
            tmp.setAttribute("src",require("../../src/asset/mp3/"+ musicId +".mp3"));
            tmp.play();			// 这个就可以实现单击后立刻播放
        }
        else
        {
            console.log("获取失败");
        }
    }