Question

一个反应组件，将显示我们计数器的当前值。

计数器应从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         犯错         ^

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


16 | cincrement =（）=> {          | ^ 17 | this.setState（{counter：this.state.counter + 1}）; 18 | }; 19 |
        在Parser.pp $ 5.raise（/runner/node_modules/babylon/lib/index.js:4454:13）         在Parser.pp。意外（/runner/node_modules/babylon/lib/index.js:1761:8）         在Parser.pp $ 1.parseClassProperty（/runner/node_modules/babylon/lib/index.js:2571:50）         在Parser.parseClassProperty（/runner/node_modules/babylon/lib/index.js:6157:20）         在Parser.pp $ 1.parseClassBody（/runner/node_modules/babylon/lib/index.js:2516:34）         在Parser.pp $ 1.parseClass（/runner/node_modules/babylon/lib/index.js:2406:8）         在Parser.pp $ 1.parseStatement（/runner/node_modules/babylon/lib/index.js:1843:19）         在Parser.parseStatement（/runner/node_modules/babylon/lib/index.js:5910:22）         在Parser.pp $ 1.parseBlockBody（/runner/node_modules/babylon/lib/index.js:2268:21）         在Parser.pp $ 1.parseBlock（/runner/node_modules/babylon/lib/index.js:2247:8）

Answer 1

您的babel配置似乎不包含class properties syntax

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

此外，由于您的下一个状态取决于上一个状态，因此您应将回调传递给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>
    )
  }
}

Answer 2

事件处理程序上的需求为binding。

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 plugin才能工作。

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

2 个答案: