反应 - 初始化状态时"Unexpected token"

Question

我对 React 相当陌生，所以请原谅这个问题中的任何错误！

我目前正在尝试让一个基本的登录表单工作：

import React, { Component } from 'react';
import { Input, Form, Button } from 'semantic-ui-react'
class LoginForm extends Component {
state = { username: '', password: '' }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleSignIn(e) {
e.preventDefault()
this.props.onSignIn(this.username, this.password)
}
render() {
const { username, password } = this.state
return (
<div className="login-container">
<Form onSubmit={this.handleSignIn.bind(this)}>
<Form.Field>
<Input icon="user" iconPosition="left" placeholder="Username" type="text" ref="username" onChange={this.handleChange}/>
</Form.Field>
<Form.Field>
<Input icon="user secret" iconPosition="left" placeholder="Password" type="password" ref="password" onChange={this.handleChange}/>
</Form.Field>
<Form.Field>
<Button type="submit" className="inputSpacing" color="yellow"><Icon name='lock' />Login</Button>
</Form.Field>
</Form>
</div>
);
}
}
export default LoginForm;

我面临的问题是state = { username: '', password: '' }行生成以下错误：

ERROR in ./react-client/src/components/coreComponents/loginForm.js Module build failed: SyntaxError: D:/path/to/project/react-client/src/components/coreComponents/loginForm.js: Unexpected token (6:8)

我从这里复制了这个，但即使是那里的代码片段也给了我这个错误。我错过了什么？:(

Answer 1

正如在github上的类似问题上提到的。您应该编辑.babelrc文件以便能够使用此语法。

{
"presets": [
["es2016"],
"react"
],
"plugins": [
"babel-plugin-transform-class-properties"
]
}

Answer 2

将其包含在构造函数中。您还需要使用此关键字将您的状态绑定到您的组件

constructor() {
super();
this.state = {
username: '', password: ''
};
}

Answer 3

你没有Input的name属性。

<Input name="username" icon="user" iconPosition="left" placeholder="Username" type="text" ref="username" onChange={this.handleChange}/>
<Input name="password" icon="user secret" iconPosition="left" placeholder="Password" type="password" ref="password" onChange={this.handleChange}/>