我正在使用 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 应用程序发出请求的组件。
最佳答案
您使用的是已弃用的语法,请改用 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>
);
}
}
关于javascript - 绝对初学者 React 按钮 Axios,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45528190/