一个reactjs模块，用于在按下按钮时增加计数-

Question

显示计数器当前值的react组件。

计数器应该从0开始。应该有一个添加1的按钮。还应该有一个减去1的按钮。

我无法理解这个问题，因为我遗漏了什么或一些错误的语法。

const React = require('react');

class Counter extends React.Component{
  constructor(...args){
    super(...args);

    this.state = { counter: 0 };
}

// Your event handlers 

  cincrement = () => {
    this.setState({ counter: this.state.counter+1 });
  };

  cdecrement = () => {
    this.setState({ counter: this.state.counter-1 });
  };


  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
          <button type="button" onClick={this.cincrement}>
            Decrement
          </button>
          <button type="button" onClick={this.cdecrement}>
            Increment
          </button>
      </div>
    )
  }
}

我运行代码时出现的错误

/runner/node_modules/babel core/lib/transformation/file/index。js:590投掷错误^

/home/codewarrior/index.js：意外令牌（16:13）14|//事件处理程序15|

16 | cincrement=（）=

Answer 1

React需要绑定事件处理程序。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

避免这种情况的一种方法是在构造函数中定义处理程序：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = ev => {
      this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
      }));
    }
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

您的原始代码IIRC需要一个特殊的babel插件才能工作。

Answer 2

似乎您的Babel配置不包括类属性语法

您可以使用普通的原型方法，然后在构造函数中预绑定它们

另外，由于您的下一个状态取决于上一个状态，因此您应该将回调传递给setState

const React = require('react');

class Counter extends React.Component{
  constructor(...args){
    super(...args);

    this.state = { counter: 0 };
    this.cincrement = this.cincrement.bind(this);
    this.cdecrement= this.cdecrement.bind(this)
}

// Your event handlers 

  cincrement(){
    this.setState(state => ({ counter: state.counter+1 }));
  }

  cdecrement() {
    this.setState(state => ({ counter: state.counter-1 }));
  }


  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
          <button type="button" onClick={this.cincrement}>
            Decrement
          </button>
          <button type="button" onClick={this.cdecrement}>
            Increment
          </button>
      </div>
    )
  }
}