如何解决问题当前未启用对实验性语法“classProperties”的支持

Question

I have this error Support for the experimental syntax 'classProperties' isn't currently enabled when I try to run the react js application.

I am trying to increment the value inside a <span> when I click a `

Here is the code snippet regarding my work...

 import React, {Component} from 'react';

 export default class Test extends Component {

  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  handleClick = () =>{ //this is where it triggers the error mentioned above
    this.setState((state) => ({counter: state.counter+1}));
  }


  render() {
    return (
      <div>
        <span>{this.state.counter}</span>
        <input type="button" value={this.props.value}
               onClick={this.handleClick} />
      </div>
    );
  }

}

But I get this error Support for the experimental syntax 'classProperties' isn't currently enabled

Can someone please help me?

Answer 1

I have this error Support for the experimental syntax 'classProperties' isn't currently enabled when I try to run the react js application.

I am trying to increment the value inside a <span> when I click a `

Here is the code snippet regarding my work...

 import React, {Component} from 'react';

 export default class Test extends Component {

  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  handleClick = () =>{ //this is where it triggers the error mentioned above
    this.setState((state) => ({counter: state.counter+1}));
  }


  render() {
    return (
      <div>
        <span>{this.state.counter}</span>
        <input type="button" value={this.props.value}
               onClick={this.handleClick} />
      </div>
    );
  }

}

But I get this error Support for the experimental syntax 'classProperties' isn't currently enabled

Can someone please help me?

Answer 2

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called so you need to write below code in constructor

  constructor(props) {
    super(props);

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