單選按鈕onChange函數不會更新應用程序的狀態-React

Question

我正在嘗試學習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> 

Answer 1

這個：

  turnItOff() {
    if (this.state.power == true) {
      this.setState({
        power: false
      });
    } else {
      this.setState({
        power: false
      });
    }
  }

應該是這樣的：

toggle() {
  this.setState({ power: !this.state.power });
}

擁有它的方式，只會將power設置為false 。

Answer 2

if (this.state.power == true) {
    this.setState({
    power: false
})      
} else {
this.setState({
  power: false
})        

if和else語句是否都在做同一件事？ 你能檢查一下邏輯嗎？

Answer 3

得到了問題

狀態在turnItOff方法上未正確更改。

如下更新代碼：

 turnItOff() {
if (this.state.power == true) {
this.setState({
  power: !this.state.power
})      
} else {
this.setState({
  power: !this.state.power
})        
}

};

在這里擺弄