Блог

Я написал следующий JSX в соответствии с документами, но состояние не отражает изменений в зависимости от нажатия кнопки.

В чем может быть причина?

 import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'react-datasheet/lib/react-datasheet.css';

export default class TableCode extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 }
  };

  handleButtonClick(event) {
    this.setState({ count: 2 })
  }

  render() {
    return (
      <button type="button" class="btn btn-primary m-3" onclick={this.handleButtonClick.bind(this)}>Generate Code</button>
    );
  }
}
  

Сначала используйте функцию со стрелкой, поскольку она не требует привязки.Плюс onclick орфография была неправильной, поскольку react использует camelCase onClick .

 constructor(props) {
      super(props);
      this.state = { count: 1 }
    };
  
    handleButtonClick=(event) =>{

      this.setState({ count: 2 })
     //console.log(event);
    }
    
    render() {
      console.log(this.state.count);
  
      return (
        <button type="button" class="btn btn-primary m-3" onClick={()=>{this.handleButtonClick()}}>Generate Code</button>
      );
    }
  

Или второе решение, как вы хотите, с помощью метода bind.

 constructor(props) {
        super(props);
        this.state = { count: 1 }
        this.handleButtonClick = this.handleButtonClick.bind(this)
      };
    
      handleButtonClick() {
        this.setState({ count: 2 })
      }
    
      render() {
        console.log(this.state.count);
        return (
          <button type="button" class="btn btn-primary m-3" onClick={this.handleButtonClick}>Generate Code</button>
        );
      }
    }
  

 import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'react-datasheet/lib/react-datasheet.css';

export default class TableCode extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 }
  };

  render() {
    return (
      <button type="button" class="btn btn-primary m-3" 
       onClick={() => this.setState({ count: 2})}>Generate Code</button>
    );
  }
}
  

Ваш код в порядке, вам просто нужно изменить onclick на onClick .

 render() {
  return (
    <button type="button" className="btn btn-primary m-3" onClick={this.handleButtonClick.bind(this)}>Count is {this.state.count}</button>
  );
}
  

В JSX заглавные буквы атрибутов важны и отличаются от обычного HTML.

class также следует изменить на className .