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
})        
}

};

fiddle here

单选按钮onChange函数不会更新应用程序的状态-React

3 个答案: