当我这样做时，它正在工作，但是当我以另一种方式编写函数时，为什么它不起作用？

Question

import React from 'react';
class Login extends React.Component {
goToDashboard(event){
event.preventDefault();
console.log("I am Clicked");}
render() {
return(
<div>
<h2>Login</h2>
<form onSubmit={this.goToDashboard}>
<label>FirstName</label>
<input type="text" placeholder="Email" name="email" /><br />
<label>Password</label>
<input type="password" placeholder="password" name="password" /><br />
<button type="submit">Login</button>
</form>
</div>
)
}
}
export default Login;

当我按照上面声明的方式编写函数时，一切都很好，但当我使用箭头函数而不是它时，它会显示错误，为什么？

const goToDashboard = (event) => {
event.preventDefault();
console.log("I am Clicked");}

Answer 1

这是因为不能在类中声明const字段
如果删除const，它将起作用。

goToDashboard = event => {
event.preventDefault();
console.log("I am Clicked");
};

CodeSandBox上的工作演示。