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>
       );
   } 
});

如果有人能提供一些帮助，我会非常感激。我只是希望能够呈现可以向我的快递应用程序发出请求的组件。

Answer 1

您使用的是不推荐使用的语法，请使用React与ES6。

关于您的问题，您有多种语法错误：

getInitialState右括号后缺少一个逗号。
this.setState()
可能你没有导入反应

以下是带有更正的代码：

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>
    );
  }
}

Answer 2

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

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

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

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

Absolute Beginner React Button Axios

2 个答案: