Кнопка React Bootstrap Не распознает функцию onClick - PullRequest
Новая
       16

Кнопка React Bootstrap Не распознает функцию onClick

0 голосов
/ 22 мая 2019

У меня есть приложение React Bootstrap с кнопками onclick.Первые 2 кнопки, play и pause работают.Следующие кнопки, тем не менее, даже не отображаются в консоли реагирования как имеющие присоединенную функцию.

Все кнопки связаны с функциями в пределах одной области действия, и все они почти идентичны

Ive Trial изменяяВызовы onClick и преобразование нераспознанных функций в console.logs в случае, если это была функция, нарушающая их. 

class Buttons extends React.Component{
handleSelect =(e) => {
    this.props.gridSize(e);
}
render(){
    return(
        <div className="buttonsDiv">
            <ButtonToolbar>
                <button className="btn" onClick={this.props.playButton}>Play</button>
                <button className="btn" onClick={this.props.pauseButton}>Pause</button>
                <button className="btn" onClick={this.props.clear}>Clear</button>
                <button className="btn" onClick={this.props.fast}>Fast</button>
                <button className="btn" onClick={this.props.slow}>Slow</button>
                <button className="btn" onClick={this.props.seed}>Seed</button>
                <DropdownButton 
                    title="Grid Size"
                    id="size-menu"
                    onSelect={this.handleSelect} >
                    <Dropdown.Item eventKey="1">20x10</Dropdown.Item>
                    <Dropdown.Item eventKey="2">50x30</Dropdown.Item>
                    <Dropdown.Item eventKey="3">70x50</Dropdown.Item>
                </DropdownButton>
            </ButtonToolbar>
        </div>
    )
}
}

class Main extends React.Component {
constructor() {
super();
this.speed = 1100;
this.rows = 30;
this.cols = 50;

this.state = {
  generation: 0,
  gridFull: Array(this.rows)
    .fill()
    .map(() => Array(this.cols).fill(false)) //make array of Rows and foreach row make an array of all the columns - making a grid.
};
}

 selectBox = (row, col) =>{
  this.setState((previousState)=>{
  let {gridFull} = previousState;
  gridFull[row][col] = !gridFull[row][col]
  return {gridFull: gridFull }
  });
}

 seed = () => { 
  this.setState((prevState)=> {
      let {gridFull} = prevState;

      for (let i=0; i<this.rows; i++){
          for (let j=0; j< this.cols; j++){
              if(Math.floor(Math.random() * 4) === 1){
                  gridFull[i][j] = true;
              }
          }
      }
      return {gridFull:gridFull}
  });
}

  playButton =() => {
  clearInterval(this.intervalId)
  this.intervalId = setInterval(this.play, this.speed);
}
pauseButton =() => {
   clearInterval(this.intervalId);
}

slow =() => {
  console.log('hi')
 //   this.speed=100;
 //   this.playButton();
}

fast = () => {
  console.log(this.speed)
  this.speed =1000;
  this.playButton();
}

clear = () => {
 var grid = Array(this.rows).fill().map(() => 
 Array(this.cols).fill(false));
  this.setState({
      gridFull: grid,
      generation : 0
   });
}

play = () => {
code

 }

componentDidMount(){
this.playButton();

   this.seed();
}
  render() {
  return (
   <div>
     <h1>React Application</h1>
     <Buttons playButton ={this.playButton}
             pauseButton={this.pauseButton}
     />
     <Grid
       gridFull={this.state.gridFull}
       rows={this.rows}
       selectBox={this.selectBox}
       cols={this.cols}
     />

     <h2>Generations: {this.state.generation}</h2>
   </div>
  );
}
 }

Таким образом, на панели инструментов кнопок работают первые 2 кнопки, а остальные даже не отображают функции в качестве реквизитов вконсоль реагирования.

Как вы можете видеть, они обе вызывают функции в одной и той же области видимости, поэтому я не знаю, что происходит.

1 Ответ

0 голосов
/ 22 мая 2019 
    <Buttons 
        playButton={this.playButton}
        pauseButton={this.pauseButton}
        clear={this.clear}
        fast={this.fast}
        slow={this.slow}
        seed={this.seed}
    />
...