意外的标记，预期 ，(28:0)，在编码 React 本机时

Question

我正在使用 react-native 编写我的第一个测试应用程序，但我无法让我的语法工作。我不明白这个，我哪里做错了？

法典：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Form extends React.Component ({
  getInitialState: function(){
    return {
      userEvent : ""
    }
  },
  handleChange: function(e){
    this.setState({
      userEvent = e.target.value
    })
  },
  render() {
    return (
      <div>
      <h2>{this.userEvent}</h2>
      <input type="text" value={this.state.userEvent} onChange={this.handleChange}/>
      </div>
    )
  }
}

这是代码声明它期望的地方"，"：

export default class App extends Component {

有什么提示吗？

render() {
    return (
      <Form />
    );
  }
}

Answer 1

首先，您没有正确使用this.setState。 this.setState将返回对象的对象或函数作为输入。 {userEvent = e.target.value} 不是有效的 JavaScript...

handleChange: function(e){
  this.setState({
    userEvent: e.target.value,
  })
}

其次，您还忘记关闭组件Form：

render() {
    return (
      <Form />
    );
  }
}

您在函数 getInitialState 和 handleChange 之后添加了"，"

"

删除了React.Component后的括号

添加了handleChange函数的绑定

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  getInitialState(){
    return {
      userEvent: ""
    }
  }
  handleChange(e) {
    this.setState({
      userEvent: e.target.value
    });
  }
  render() {
    return (
      <div>
        <h2>{this.userEvent}</h2>
        <input type="text" value={this.state.userEvent} onChange={this.handleChange}/>
      </div>
    )
  }
}

编辑：回答您的答案

您有一个错误，指出它找不到变量Component因为如@Aaqib所述，您使用

export default class App extends Component {

而不是

export default class App extends React.Component {