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)

我已经从here复制了此代码，但是即使那里的代码段也给了我这个错误。我想念什么？：（

Answer 1

将其包含在构造函数中。另外，您还需要使用此关键字

将状态绑定到组件

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

Answer 2

如类似的issue on github所述。您应该编辑您的 .babelrc 文件以使用此语法。

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

Answer 3

您没有creation_Date,Hour_of_day,log_count 2018-08-16,0,3278 2018-08-17,4,278 2018-08-18,10,6723的{{1}}属性。

name

反应-初始化状态时出现“意外令牌”

3 个答案: