React - 初始化状态时出现“意外令牌”答案

【问题标题】：React - "Unexpected token" when initialising stateReact - 初始化状态时出现“意外令牌”
【发布时间】：2019-01-28 02:27:41
【问题描述】：

我是 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)

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

【问题讨论】：

你能和我们分享你的 .babelrc 文件吗？
是的，我跳过了错误并在我的回答中快速得出结论。问题可能是类字段提案。
看看this issue，好像是同样的问题
是的，绝对是@Philippe。

标签： reactjs semantic-ui

【解决方案1】：

正如在类似的issue on github 中提到的。你应该编辑你的 .babelrc 文件才能使用这个语法。

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

【讨论】：

这听起来可能是同一个问题。使用 Ayan 的解决方案时，错误刚刚移动到 handleChange 行，所以我认为您说我需要正确设置我的 babel 配置是正确的。虽然我看不到 babelrc 文件....显然这是因为我安装了create-react-app
@mfisher91 那是因为您想使用需要正确设置 babel 的特定语法。如果你不想设置 babel，你可以使用像 Ayan 这样的基本语法，但是你必须像对 handleSignIn 那样绑定你的 handleChange 函数

【解决方案2】：

将它包含在构造函数中。您还需要使用 this 关键字

将您的状态绑定到您的组件

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

【讨论】：

如果安装了正确的 babel 插件，则不需要这样做。
如果我可以将两个答案标记为正确，这将是我的第二选择！

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

【讨论】：

这个答案也是正确的——我需要将ref 更改为name。如果你们三个结合你的答案，那就完美了！
是的，这是你的第二个问题 :) 我没有正确阅读错误，所以我专注于输入部分。但实际问题不同。实际上，答案应该解释你为什么会遇到这个问题以及如何解决它。您在代码中使用了一个提案：“类字段”。所以，如果你想使用它，你需要一个 babel 插件。 @Ayan 的解决方案只是一种解决方法。如果你不想使用这个 Babel 插件，你需要按照常规语法编写整个代码。