javascript - 绝对初学者 React 按钮 Axios

Question

我正在使用 create-react-app并尝试修改 App.js 文件以拥有一个按钮，该按钮具有发出 axios HTTP 请求的 onclick 方法。我已经尝试了几个星期，我遇到的最多的错误是 handleClick(e) 中的意外标记。 I tried this我不明白为什么它不能编译:

// Example React.js Component

var ButtonComponent = React.createClass({
    getInitialState: function() {
        return {
            numClicks: 0
        }
    }
   click: function() {
        this.setState(numClicks: this.state.numClicks + 1);
    },
    render: function() {
       return  (
        <div>
            <button onClick={this.click.bind(this)}>Click Me</button>  
            {this.state.numClicks}
        </div>
       );
   } 
});

如果有人能提供一些帮助，我将不胜感激。我只想能够呈现可以向我的 Express 应用程序发出请求的组件。

Answer 1

您使用的是已弃用的语法，请改用 React with ES6。

关于你的问题，你有多个语法错误:

• getInitialState 右大括号后缺少一个逗号。
• this.setState() 中缺少大括号
• 可能你没有导入 react

这里是修改后的代码:

var ButtonComponent = React.createClass({
  getInitialState: function() {
    return {
      numClicks: 0
    }
  },
  click: function() {
    this.setState({ numClicks: this.state.numClicks + 1 });
  },
  render: function() {
    return  (
      <div>
        <button onClick={this.click.bind(this)}>Click Me</button>
        {this.state.numClicks}
      </div>
    );
  }
});

我建议您阅读 documentation/guide并切换到 ES6。

下面是同样使用 ES6 的代码:

import React, { Component } from 'react';

class ButtonComponent extends Component {

  constructor(props) {
    super(props); 
    this.state = {
      numClicks: 0
    }
  }

  click() {
    this.setState({ numClicks: this.state.numClicks + 1 });
  }

  render() {
    return  (
      <div>
        <button onClick={this.click.bind(this)}>Click Me</button>
        {this.state.numClicks}
      </div>
    );
  }
}