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>
    )
  }
}

这是代码预期的地方＆＃34;，＆＃34;：

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 {

编码React native时出现意外的令牌，预期为（28：0）

1 个答案: