Question

我本周刚刚开始学习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;

如何通过子菜单中的单选按钮更改父组件的状态？

0 个答案: