Question

我有一个带有onclick按钮的React Bootstrap应用程序。前两个按钮，播放和暂停工作。但是，下一个按钮甚至没有在React控制台中显示为具有附加功能prop。

所有按钮都链接到同一作用域内的功能，并且它们几乎都相同

我已经尝试过更改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>
  );
}
 }

因此，在按钮工具栏中，前两个按钮可以工作，其余两个按钮甚至在React控制台中都没有显示为道具功能。

如您所见，它们都在同一范围内调用函数，所以我不知道发生了什么。

Answer 1

    <Buttons 
        playButton={this.playButton}
        pauseButton={this.pauseButton}
        clear={this.clear}
        fast={this.fast}
        slow={this.slow}
        seed={this.seed}
    />

React Bootstrap按钮无法识别onClick功能

1 个答案: