予期しないトークン、（28：0）、コーディング時ネイティブリアクタ

Question

私は反応ネイティブの私の最初のテストアプリケーションをコーディングしていますが、動作するための構文を取得できません。私はこれを手に入れません、どこで間違っていますか？

コード：コードは、それを述べたのはここ

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は、オブジェクトまたは入力としてオブジェクトを返す関数を取ります。あなたの機能getInitialStateとhandleChange

を削除した後に ''

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

あなたが追加しました：{userEvent = e.target.value}は

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

第二に、あなたはまた、あなたのFormコンポーネントを閉じるのを忘れて...有効なJavaScriptではありませんかっこ後React.Component

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

編集：あなたの答えへの回答

あなたは@Aaqibで述べたように、あなたが

export default class App extends Component { 

を使用しているため、変数Componentが見つからないというエラーがでてい代わりに

export default class App extends React.Component {