我本周刚刚开始学习React,我正在尝试制作音板。我能够使共鸣板正常工作,但是我希望能够通过单选按钮更改每个按键的声音。
我已经查找了大量的stackoverflow问题,但是仍然无法正常工作。我也尝试过控制台注销所有内容并检查开发工具,但仍然没有运气。我可能会以完全错误的方式来解决这个问题,但是我对React还是不太熟悉,所以我不确定。任何帮助,将不胜感激!
基本上,我想做的是在2种不同的声音选项[sounds.sound1和sounds.sound2]之间进行切换
APP.JS:
import React, { Component } from "react";
import "./App.css";
import Pad from "./Pad";
import SoundSelector from "./SoundSelector";
import sounds from "./sounds";
class App extends Component {
state = {
first808: sounds.sound1,
};
handleFirst808Change = e => {
const first808 = { ...this.state.first808 };
console.log("changed");
console.log(this.state.first808);
this.setState({ first808: e.target.value });
this.setState({ first808: first808 });
};
handleKeyDown = e => {
if (e.key === "a") {
console.log("a has been pressed");
const audio = new Audio(`${this.state.first808.audio}`);
audio.loop = false;
audio.play();
}
render() {
return (
<div className="controller">
<Pad handleKeyDown={this.handleKeyDown} />
<SoundSelector
sounds={this.state}
handleFirst808Change={this.handleFirst808Change}
/>
</div>
);
}
}
SOUNDSELECTOR.JS
import React from "react";
class SoundSelector extends React.Component {
render() {
return (
<div className="sound-selector">
<h2>Choose Sounds</h2>
<div className="first-808">
<h3>First 808</h3>
<label>
<input
type="radio"
onChange={this.props.handleFirst808Change}
value={this.props.sounds.sound1}
name="first-808"
/>
Option 1
</label>
<label>
<input
type="radio"
onChange={this.props.handleFirst808Change}
value={this.props.sounds.sound2}
name="first-808"
/>
Option 2
</label>
</div>
}
export default SoundSelector;