绝对初学者 React 按钮 Axios答案

【问题标题】：Absolute Beginner React Button Axios绝对初学者 React 按钮 Axios
【发布时间】：2017-08-06 03:08:45
【问题描述】：

我正在使用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 应用发出请求的组件。

【问题讨论】：

您有多个语法错误，click 之前缺少一个逗号，setState 中缺少大括号 -> setState({ numClicks: this.state.numClicks + 1 }) 并且您可能没有导入 React
我是一个完整的初学者，所以我不知道语法有什么问题。是否有任何地方可以将我链接到有类似于我想做的事情的示例？谢谢！！
首先看，你使用的是一种弃用的语法。

标签： javascript reactjs button axios create-react-app

【解决方案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>
    );
  }
}

【讨论】：

非常感谢！！

【解决方案2】：

React.createClass 已弃用。使用 ES6 类。在您使用 create-react-app 创建的 react 应用程序中的 src/App.js 中尝试以下操作：

class App extends Component {
  onClick() {
    // axios request
  }
  render() {
    return (
      <button onClick={() => this.onClick() }>Axios Request</button>
    );
  }
}

official tutorial 是学习 React 基础知识的好地方。

一旦您开始熟悉语法，我强烈建议您准备好 Sebmarbage's react-basics 解释理论概念。

【讨论】：

非常感谢！