javascript - 单选按钮 onChange 功能不会更新应用程序的状态

问题描述

我正在尝试学习 React 但坚持某事。我也检查了其他主题，但找不到答案。

我正在尝试使用开/关单选按钮关闭应用程序。当我第一次运行该应用程序时，按 Q 可以工作并播放声音。当我单击关闭收音机但它不再起作用时，这是我正在尝试做的。但是，当我再次单击单选按钮时，它不会播放任何声音。

我也愿意接受您的建议以优化我的代码。

let { Button, ButtonToolbar, ButtonGroup, Radio } = ReactBootstrap;

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        power: true,
    };
    this.playSound = this.playSound.bind(this);
    this.turnItOff = this.turnItOff.bind(this);
    const bankOne = [{
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  }, {
    keyCode: 83,
    keyTrigger: 'S',
    id: 'Clap',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  }, {
    keyCode: 68,
    keyTrigger: 'D',
    id: 'Open-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  }, {
    keyCode: 90,
    keyTrigger: 'Z',
    id: "Kick-n'-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  }, {
    keyCode: 88,
    keyTrigger: 'X',
    id: 'Kick',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  }, {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];
    this.audio = new Audio(bankOne[1].url)
  }
  
  playSound(){
    if (this.state.power == true) {
      return this.audio.play();
    }
  };
  
  turnItOff() {
    if (this.state.power == true) {
    this.setState({
      power: false
    })      
    } else {
    this.setState({
      power: false
    })        
    }
  };
  
  render(){
    return(
    <div id='container' >
      <div className='buttons' >
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large"  onClick = {this.playSound}>Q</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">W</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">E</Button>
          </ButtonToolbar>
        </div>
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">A</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">S</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">D</Button>
          </ButtonToolbar>   
        </div>  
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">Z</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">X</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">C</Button>
          </ButtonToolbar>   
        </div>
      </div>
      <div className='setting'>
        <div>
          <ButtonGroup className='radio' >
            <Radio name="groupOptions" defaultChecked onChange = {this.turnItOff} >ONN</Radio>     
            <Radio name="groupOptions" onChange = {this.turnItOff}>OFF</Radio>  
          </ButtonGroup>
        </div>
        <div>
          <div id='display' />          
        </div>
        <div>
          <ButtonGroup className='radio' >
            <Button bsStyle="success">Vol +</Button>
            <Button bsStyle="danger">Vol -</Button>
          </ButtonGroup>
          <ButtonGroup className='changeTune' >
            <Radio name="groupOptions">Flute Kit</Radio>           
            <Radio name="groupOptions">Piano Kit</Radio>  
          </ButtonGroup>          
        </div>
      </div>
    </div>
    )
  }
}

ReactDOM.render(
	<App/>,
    document.getElementById('drum-machine')
);

#container{
  background-color:#f5f5f5;
  margin: 30px auto;
  width: 30%;
  height: 200px;
  border: 3px solid #337ab7;
  padding: 10px;
}

.buttons{
  float:left;
}

.radio{
  display:inline-block;
  margin: 4px;
}

.firstLine {
  margin: 10px;
}

#display{
  background-color: #337ab7;
  float: left;
  width: 180px;
  height: 40px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id='drum-machine'></div>

标签： javascriptreactjs

javascript - 单选按钮 onChange 功能不会更新应用程序的状态 - React

问题描述

解决方案

推荐阅读